Vue3.0如何封装并使用全局轮播图

 1.这是它的结构,css样式根据设计图再去写: 

<template><div class='xtx-carousel'><ul class="carousel-body"><li class="carousel-item fade"><RouterLink to="/"><img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/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 v-for="i in 5" :key="i"></span></div></div>
</template>

因为我写的这个项目,其它地方也要用轮播图,所以我这里把它封装成了全局的组件。

src/components/index.js 中两步 ,1.导入,2.

然后components/index.js在main.js中导入,main.js文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为app的节点上。 

轮播图效果实现的原理:

定义一个变量currentIndex = 0表示第一张图片，默认渲染第一张图片即  xxx数组[currentIndex]，然后获取每张图片的下标。点击切换图片时把当前图片的下标赋值给currentIndex即可实现图片切换显示。

点击小圆点切换图片: 

点击左右按钮切换图片: 

  const toggle = step => {index.value += stepif (index.value >= props.sliders.length) {index.value = 0}if (index.value < 0) {index.value = props.sliders.length - 1// 一共5 然后-1就是最后一张图}}

自动播放轮播: 

自定义指令用props来接收:

 这组件里面props都需要定义一些什么参数,比如说轮播图,是否需要自动播放,每一张图片自动播放的时间间隔,渲染图片的数组,这些都是到时候会发生改变的,所以props接收的就是这些会发生变化的参数

封装好全局组件之后，复用的时候： 就<XtxCarousel :sliders="[ ]" :autoPlay="true" :duration="2500">

这是轮播图全局组件代码 ：

<template><div class='xtx-carousel' @mouseleave="stop" @mouseenter="enter"><ul class="carousel-body"><li class="carousel-item" v-for="(item,i) in sliders" :key="i" :class="{fade:index===i}"><RouterLink to="/"><img :src="item.imgUrl" alt=""></RouterLink></li></ul><a href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left" @click="toggle(-1)"></i></a><a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right" @click="toggle(1)"></i></a><!-- //小圆点 --><div class="carousel-indicator"><span v-for="(item,i) in sliders" :key="i" :class="{active:index===i}" @click="index=i"></span></div></div>
</template>i<script>
import { onUnmounted, ref, watch } from 'vue'
export default {name: 'XtxCarousel',props: {sliders: {type: Array,default: () => []},duration: {type: Number,default: 3000},autoPlay: {type: Boolean,default: false}},setup (props) {// 默认显示的图片的索引const index = ref(0)let timer = null// 自动播放const autoPlayFn = () => {timer = setInterval(() => {index.value++if (index.value >= props.sliders.length) {index.value = 0}}, props.duration)}watch(props.sliders, (newVal) => {if (newVal.length && props.autoPlay) {index.value = 0autoPlayFn()}}, { immediate: true })// if (props.autoPlay) {//   autoPlayFn()// }console.log(timer)// 组件销毁时,清空计时器onUnmounted(() => {clearInterval(timer)})// 鼠标进入的时候const enter = () => {if (props.autoPlay) {clearInterval(timer)}}// 鼠标离开的时候const stop = () => {autoPlayFn()}// 点击了轮播图左边的按钮const toggle = step => {index.value += stepif (index.value >= props.sliders.length) {index.value = 0}if (index.value < 0) {index.value = props.sliders.length - 1// 一共5 然后-1就是最后一张图}}return { index, autoPlayFn, enter, stop, toggle }}
}
</script>
<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,.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>