vue3.0封装轮播图组件的步骤(2)

const setIndex = ((dir:String): void => { switch(dir) { case 'next': state.currentIndex += 1; if (state.currentIndex === state.itemLen) { state.currentIndex = 0; } break; case 'prev': state.currentIndex -= 1; if (state.currentIndex === -1) { state.currentIndex = state.itemLen - 1; } break; default: break; } });

当next的时候，让currentIndex++； 直到等于轮播图片的长度。(array.length)

当prev的时候， 让currentIndex--； 直到=== -1

之后在item.vue中监听一下：

watch(() => { return instance.parent.ctx.currentIndex }, (value) => { state.currentIndex = value; })

这样就完成图片的轮播。

三： 圆点指示器

实现的思想还是很简单的：

通过传入的hasDot来确定需不需要显示。传入itemLen根据图片的数量来确定显示几个圆点，点击圆点可以跳转到对应的图片上。

在dot.vue中：

<template> <div v-if="hasDot"> <div v-for="item in itemLen" :key="item"> <a href="javascript:;" :style="{backgroundColor: (item - 1) === currentIndex ? dotBgColor : '#fff'}" @click="dotClick(item - 1)"> </a> </div> </div> </template> <script lang="ts"> import {defineComponent} from 'vue'; export default defineComponent({ name: 'dot', props: { itemLen: Number, currentIndex: Number, dotBgColor: { type: String, default: '#ff5000' }, hasDot: { type: Boolean, default: true } }, setup(props, ctx) { const dotClick = (index: Number) => { ctx.emit('dotClick', index); }; return { dotClick } }}) </script>

通过ctx触发dotClick事件，把index传入，在父组件中使用(Carousel.vue):

@dotClick="dotClick" const dotClick = (index: any): void => { state.currentIndex = index; };

这样完成了圆点指示器。

四： 左右指示器

这个很简单，就是移入的时候显示，然后点击图片滑动。

<template> <div v-if="showDir"> <div v-if="dir === 'next'"> <a href="javascript:;" @click="dirClick(dir)">&gt;</a> </div> <div v-else-if="dir === 'prev'"> <a href="javascript:;" @click="dirClick(dir)">&lt;</a> </div> </div> </template> <script lang="ts"> import {defineComponent} from 'vue'; export default defineComponent({ name: 'direct', props: { dir: String, showDir: { type: Boolean, default: false } }, setup(props, ctx) { const dirClick = (dir: String) => { ctx.emit('dirClick', dir); }; return { dirClick } } })</script>

一样的传给父组件一个dirClick事件，在父组件中执行点击移动就可以了。

五：最后：

因为轮播图是通过定时器实现的需要销毁定时器。

onBeforeUnmount(() => {       _clearFunction(); }); function _clearFunction(): void {      clearInterval(t);        t= null; };

在鼠标移入时停止自动播放，显示左右指示器：

const mouseEnter = (): void => { _clearFunction(); state.showDir = true; };

在鼠标移出时开始播放， 左右指示器消失

const mouseLeave = (): void => { autoPlay(); state.showDir = false; };

ok. 大体的思想就是这样，还有一些细节可以自己再多想想。感谢！！