菜单 搜索
首页 前端知识 vue3 加 TypeScript 来封装 全局组件 轮播图

vue3 加 TypeScript 来封装 全局组件 轮播图

2024-06-20 09:06:37 前端知识 前端哥 834 722 我要收藏

二级标题

轮播图-通用轮播图组件
项目中会多次使用到轮播图组件，且轮播图渲染的数据是不一样的。轮播图的基本功能都是一样的，比如图片切换，自动播放等等。因此需要封装一个通用的轮播图组件。

轮播图的基本结构

<script lang="ts" setup name="XtxCarousel">
defineProps()
</script>
 
<template>
  <div class="xtx-carousel">
    <ul class="carousel-body">
      <li class="carousel-item fade">
        <RouterLink to="/">
          <img
            src="https://www.qianduange.cn/upload/article/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg"
            alt=""
          />
        </RouterLink>
      </li>
      <li class="carousel-item">
        <RouterLink to="/">
          <img
            src="https://www.qianduange.cn/upload/article/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg"
            alt=""
          />
        </RouterLink>
      </li>
      <li class="carousel-item">
        <RouterLink to="/">
          <img
            src="https://www.qianduange.cn/upload/article/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg"
            alt=""
          />
        </RouterLink>
      </li>
    </ul>
    <a href="javascript:;" class="carousel-btn prev"
      ><i class="iconfont icon-angle-left"></i
    ></a>
    <a href="javascript:;" class="carousel-btn next"
      ><i class="iconfont icon-angle-right"></i
    ></a>
    <div class="carousel-indicator">
      <span class="active"></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>
 
<style scoped lang="less">
.xtx-carousel {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 150px;
  position: relative;
  .carousel {
    &-body {
      width: 100%;
      height: 100%;
    }
    &-item {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 0.5s linear;
      &.fade {
        opacity: 1;
        z-index: 1;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-indicator {
      position: absolute;
      left: 0;
      bottom: 20px;
      z-index: 2;
      width: 100%;
      text-align: center;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        cursor: pointer;
        ~ span {
          margin-left: 12px;
        }
        &.active {
          background: #fff;
        }
      }
    }
    &-btn {
      width: 44px;
      height: 44px;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 228px;
      z-index: 2;
      text-align: center;
      line-height: 44px;
      opacity: 0;
      transition: all 0.5s;
      &.prev {
        left: 20px;
      }
      &.next {
        right: 20px;
      }
    }
  }
  &:hover {
    .carousel-btn {
      opacity: 1;
    }
  }
}
</style>
复制

逻辑封装

完成轮播图的交互逻辑
● 自动播放，暴露自动轮播属性，设置了就自动轮播
○ 如果有自动播放，鼠标进入离开，暂停，开启
● 指示器切换，上一张，下一张
● 销毁组件，清理定时器
具体代码

<script lang="ts" setup name="XtxCarousel">
import { onBeforeUnmount, onMounted, ref } from "vue";
// duration: 决定切换一张图需要的时间。它就是自动播放的间隔 autoPlay:是否自动播放 
const {duration,autoPlay} = defineProps<{duration:number,autoPlay:boolean}>();
const arr = [
  "https://gimg2.baidu.com/image_search/src=http://cdn.micuer.com/image_temp/1c6cd32394529b50aa9e847855221828_1200_1200.png&refer=http://cdn.micuer.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661180945&t=9426000bbc2d3eec4b1207a8b1777220",
  "https://gimg2.baidu.com/image_search/src=http://i0.hdslb.com/bfs/article/8d802d12bc084b60a805e76d241170095a479408.jpg&refer=http://i0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661180945&t=d72a8ba8e8a78f5d442a7efa821fb2a3",
  "https://gimg2.baidu.com/image_search/src=http://pic1.win4000.com/wallpaper/2019-12-23/5e008399e32fa.jpg&refer=http://pic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661180945&t=51e0ac7642ecfbe6548aed2a6579aced  ",
  "https://img2.baidu.com/it/u=1912999255,2672254654&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
  "https://img2.baidu.com/it/u=1884557076,4135193950&fm=253&fmt=auto&app=138&f=JPEG?w=909&h=500"
];
 
// 初始值 默认那个图片选中
let active = ref(0);
// 左边按钮
const left = () => {
  active.value--;
  // 如果初始值 大于 0 便让初始值 等于 数组的长度减一
  if(active.value < 0) {
    active.value = arr.length-1
  }
};
 
// 右边按钮
const right = () => {
  active.value++;
  // 如果初始值等于数组的长度变回跳 到 0
  if(active.value===arr.length){
    active.value=0
  }
};
 
// 销毁组件，清理定时器
onBeforeUnmount(()=>{
  stop()
})
 
// 自动播放 如果开启了自动播放 则每隔duration 去播放下一张 left()
onMounted(()=>{
  start()
})
 
let timer = -1
// 开始  // 鼠标离开要继续播放
const start =()=>{
  // 如果是true 就开启定时器
if(autoPlay){
   timer=window.setInterval(()=>{
      right()
    },duration)
  }
}
 
// 停止 // 鼠标经过要暂停播放 
const stop = ()=>{
  // 清除定时器
clearInterval(timer)
}
</script>
 
<template>
  <div class="xtx-carousel">
    <ul class="carousel-body" @mouseleave="start()" @mouseenter="stop()">
      <!-- fade 表示当前可见的图片 -->
      <li class="carousel-item" :class="{ fade: active === index }" v-for="(item, index) in arr" :key="index">
        <RouterLink to="/">
          <img :src="item" alt="" />
        </RouterLink>
      </li>
    </ul>
    <a href="javascript:;" @click="left" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
    <a href="javascript:;" @click="right" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
    <div class="carousel-indicator">
      <span @mouseover="active=index" :class="{active:active===index}" v-for="(item,index) in arr" :key="index"></span>
      <!-- mouseover是鼠标经过 小圆点 高亮 切换图 -->
    </div>
  </div>
</template>
 
<style scoped lang="less">
.xtx-carousel {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 150px;
  position: relative;
  .carousel {
    &-body {
      width: 100%;
      height: 100%;
    }
    &-item {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 0.5s linear;
      &.fade {
        opacity: 1;
        z-index: 1;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-indicator {
      position: absolute;
      left: 0;
      bottom: 20px;
      z-index: 2;
      width: 100%;
      text-align: center;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        cursor: pointer;
        ~ span {
          margin-left: 12px;
        }
        &.active {
          background: #fff;
        }
      }
    }
    &-btn {
      width: 44px;
      height: 44px;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 228px;
      z-index: 2;
      text-align: center;
      line-height: 44px;
      opacity: 0;
      transition: all 0.5s;
      &.prev {
        left: 20px;
      }
      &.next {
        right: 20px;
      }
    }
  }
  &:hover {
    .carousel-btn {
      opacity: 1;
    }
  }
}
</style>
 
复制

不要忘记全局注册
我这边是在 components 文件下面从新创建一个 index.ts 专门来放 全局注册

// 全局组件注册
import {App} from 'vue'
import XtxCarousel from './XtxCarousel/XtxCarousel.vue'
 
export default{
  install(app:App){
    app.component('XtxCarousel',XtxCarousel)
  }
}
复制

在 在mian.ts 里面导入挂载

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由
import routers from './ router/index'
// 全局组件
import XtxUI from './components/index'
 
 
const app = createApp(App)
app.use(routers)
app.use(XtxUI)
app.mount('#app')
 
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/12994.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！