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

2023-07-04 18:43:03 65

接着上一篇文章，熟悉vue3.0的基本用法，和使用一段时间以后，开始准备开发适用于vue3.0使用的pc端的组件库。会陆续跟新一些组件库的写法和注意事项，有兴趣的同学可以多多关注哦，不多bb，开始。

开发一个轮播图组件，适用pc端，(暂无考虑app),使用于vue3.0+TS

大致的实现效果是这样：

图片自由轮播，对应圆点图片跳转，左右指示器跳转等。暴露以下options配置：

以上是主要的options，下面展开来说一下具体如何封装。

一：封装思想

在vue3.0和vue2.0中封装组件其实核心思想都是一样的，需要使用到vue.component();对组件进行注册，之后在main.ts中挂载一下就可以使用。

在src下面创建：src-->libs-->sqm_ui(自己UI库的名称）-->index.js

这里的index.js就是注册组件的入口。

同级目录下新建一个文件，Carousel，这个文件包含所有的轮播组件的功能和样式。

目录如下：

要注意一点：虽然是在vue3.0和ts中使用，但是入口文件还是用js，这也是为了可以适用非ts写法。

在index.js中：

importCarouselfrom'./Carousel/carousel';
importCarItemfrom'./Carousel/item';letSqmUI={};
SqmUI.install=function(vue){
vue.component(Carousel.name,Carousel);
vue.component(CarItem.name,CarItem);
};
exportdefaultSqmUI;

但是为了配合TS使用，我们需要新建一个index.d.ts文件，用来描述库中成员类型来给TS用。

declareconst_default:({
install:(app:import("vue").App,...options:any[])=>any;//这里单纯描述一下install});
exportdefault_default;

完成以上配置后，在main.ts中使用：

importSqmUIfrom'@/libs/sqm_ui/index';
import{createApp}from'vue';
createApp.use(SqmUI);

二：封装流程

对于轮播图而言，我们需要一个固定的容器，来放置每一张滚动的图片，这时候我们需要定义一个Carousel.vue组件。

还需要一个用来存储照片的组件，item.vue

基本框架搭好，当用户使用的时候在carousel中配置options。

在carousel.vue中：接受传来的配置项

props:{
autoplay:{
type:Boolean,
default:true},
duration:{
type:Number,
default:3000},
initial:{
type:Number,
default:0},
hasDot:{
type:Boolean,
default:true},
hasDirector:{
type:Boolean,
default:true}
}

(1):实现autoPlay：

在carousel.vue中：

constautoPlay=()=>{
if(props.autoplay){
t=setInterval(()=>{
//轮播逻辑
},props.duration);
};
onMounted(()=>{
autoPlay();
});

逻辑很简单，定义一个autoPlay函数，在mounted阶段挂载。

(2):实现轮播：

想这样一个问题：如何才能让这一张图片显示？一定需要当前图片的index，等于轮播时的index才可以显示。

在item.vue中：

只有当自身的index，等于当前的index的时候才能显示。

获取currentIndex：

vue3.0中内置方法： getCurrentInstance()

这是一个很重要的方法，通过这个方法我们可以获取当前组件的实例，然后通过ctx获取该组件的上下文。特别好用。

在item.vue中：

setup(){
constinstance:any=getCurrentInstance();console.log(instance);
}

在instance.vnode下面有个key是每个图片对应的自身的key也就是index。

在instance.parent.ctx下面有个定义的currentIndex，是当前的index。

当二者相同时，可以显示当前图片。那么currentIndex在哪里设置呢？

回到carousel.vue中：

setup(props){
conststate=reactive({
currentIndex:props.initial,
itemLen:0,
showDir:false
});
}

当前的currentIndex就是传入的initial的值。

在autoPlay中：执行轮播

constsetIndex=((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(()=>{
returninstance.parent.ctx.currentIndex
},(value)=>{
state.currentIndex=value;
})

这样就完成图片的轮播。

三：圆点指示器

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

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

在dot.vue中：



import{defineComponent}from'vue';
exportdefaultdefineComponent({
name:'dot',
props:{
itemLen:Number,
currentIndex:Number,
dotBgColor:{
type:String,
default:'#ff5000'},
hasDot:{
type:Boolean,
default:true}
},
setup(props,ctx){
constdotClick=(index:Number)=>{
ctx.emit('dotClick',index);
};
return{
dotClick
}
}})

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

@dotClick="dotClick"

constdotClick=(index:any):void=>{

state.currentIndex=index;

};

这样完成了圆点指示器。

四：左右指示器

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




import{defineComponent}from'vue';
exportdefaultdefineComponent({
name:'direct',
props:{
dir:String,
showDir:{
type:Boolean,
default:false
}
},
setup(props,ctx){
constdirClick=(dir:String)=>{
ctx.emit('dirClick',dir);
};
return{
dirClick
}
}
})

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

五：最后：

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

onBeforeUnmount(()=>{

   _clearFunction();

});

function_clearFunction():void{

   clearInterval(t);

    t=null;

};

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

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

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

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

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

六：往期回顾

www.nhooo.com/article/206833.htm

以上就是vue3.0封装轮播图组件的步骤的详细内容，更多关于vue3.0封装轮播图组件的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。