，熟悉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中：
但是为了配合ts使用，我们需要新建一个index.d.ts文件，用来描述库中成员类型来给ts用。
完成以上配置后，在main.ts中使用：
二：封装流程
对于轮播图而言，我们需要一个固定的容器，来放置每一张滚动的图片，这时候我们需要定义一个carousel.vue组件。
还需要一个用来存储照片的组件，item.vue
基本框架搭好，当用户使用的时候在carousel中配置options。
在carousel.vue中：接受传来的配置项
(1): 实现autoplay：
在carousel.vue中：
逻辑很简单，定义一个autoplay函数，在mounted阶段挂载。
(2): 实现轮播：
想这样一个问题：如何才能让这一张图片显示？一定需要当前图片的index，等于轮播时的index才可以显示。
在item.vue中：
只有当自身的index，等于当前的index的时候才能显示。
获取currentindex：
vue3.0中内置方法： getcurrentinstance()
这是一个很重要的方法，通过这个方法我们可以获取当前组件的实例，然后通过ctx获取该组件的上下文。特别好用。
在item.vue中：
在instance.vnode下面有个key是每个图片对应的自身的key也就是index。
在instance.parent.ctx 下面有个定义的currentindex，是当前的index。
当二者相同时，可以显示当前图片。那么currentindex在哪里设置呢？
回到carousel.vue中：
当前的currentindex就是传入的initial的值。
在autoplay中：执行轮播
当next的时候，让currentindex++； 直到等于轮播图片的长度。(array.length)
当prev的时候， 让currentindex–； 直到=== -1
之后在item.vue中监听一下：
这样就完成图片的轮播。
三： 圆点指示器
实现的思想还是很简单的：
通过传入的hasdot来确定需不需要显示。传入itemlen根据图片的数量来确定显示几个圆点，点击圆点可以跳转到对应的图片上。
在dot.vue中：
通过ctx触发dotclick事件，把index传入，在父组件中使用(carousel.vue):
这样完成了圆点指示器。
四： 左右指示器
这个很简单，就是移入的时候显示，然后点击图片滑动。
一样的传给父组件一个dirclick事件，在父组件中执行点击移动就可以了。
五：最后：
因为轮播图是通过定时器实现的需要销毁定时器。
在鼠标移入时停止自动播放，显示左右指示器：
在鼠标移出时开始播放， 左右指示器消失
ok. 大体的思想就是这样，还有一些细节可以自己再多想想。感谢！！
六：往期回顾
以上就是vue3.0封装轮播图组件的步骤的详细内容，更多关于vue3.0封装轮播图组件的资料请关注www.887551.com其它相关文章！
