vue轮播图组件,js封装轮播图
本文主要介绍vue3.0打包轮播组件的步骤，帮助你更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
一：打包思路二：打包流程三：点号指示符四：左右指示符五：最后：六：往期回顾，然后熟悉vue3.0的基本用法，使用一段时间后，开始准备开发vue3.0使用的pc的组件库，我们会陆续按照一些新组件库的编写方法和注意事项，感兴趣的同学可以多关注一下。不多bb了，走吧。
开发一个carousel组件，适用于pc(暂时不考虑app)，用于vue3.0 TS。
一般实现效果如下：
图片免费轮播，对应点图片跳转，左右指示器跳转等。公开了以下选项配置：
以上是主要选项。让我们扩展一下如何封装它们。
一：封装思想
其实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中：
从导入旋转木马。/Carousel/Carousel ；
从导入CarItem。/Carousel/item ；设SqmUI={ }；
SqmUI.install=function(vue) {
vue.component(Carousel.name，Carousel)；
vue.component(CarItem.name，CarItem)；
};
导出默认SqmUI
但是，为了与ts配合，我们需要创建一个新的index.d.ts文件来为TS描述库中的成员类型。
声明const _default: ({
安装：(app: import(vue )。Appany，选项：any[])=any；//这里简单描述一下install })；
导出默认_默认；
以上配置完成后，在main.ts中使用：
从“@/libs/sqm_ui/index”导入SqmUI
从“vue”导入{ create app }；
create app . use(SqmUI)；
二：封装流程
对于carousel，我们需要一个固定的容器来容纳每一张滚动的图片。这时，我们需要定义一个Carousel.vue组件。
模板
div class=旋转木马
Slot/Slot //这里的slot是用来放置物品组件的。
/div
/模板
还需要一个存储照片的组件item.vue
模板
div class=旋转木马-项目
Slot/Slot //这里的slot是用来放置img的
/div
/模板
框架基本搭建完成，用户使用时在carousel中配置选项。
旋转木马
:autoPlay=true
:durdation= 3000
:initial=3
:hasDot=true
:hasDirector=true /carousel
在carousel.vue中：接受传入的配置项。
道具：{
自动播放：{
类型：布尔型，
默认值：true }，
持续时间：{
类型：数量，
默认值：3000 }，
初始：{
类型：数量，
默认值：0，
hasDot: {
类型：布尔型，
默认值：true }，
hasDirector: {
类型：布尔型，
默认值：true }
}
(1):实现自动播放：
在carousel.vue中：
const autoPlay=()={
if (props.autoplay) {
t=setInterval(()={
//轮播逻辑
}，props . duration)；
};
onMounted(()={
autoPlay()；
});
逻辑很简单。定义一个自动播放功能，并将其安装在已安装的阶段中。
(2):实现轮播：
想到这个问题：怎么才能让这个图片显示出来？当前图片的索引必须等于转盘的索引才能显示。
在item.vue中：
v-if=selfIndex===currentIndex
插槽/插槽
/div
只有当它自己的索引等于当前索引时，它才能显示。
获取当前索引：
vue3.0中的内置方法：getCurrentInstance()
这是一个非常重要的方法，通过它我们可以得到当前组件的实例，然后通过ctx得到组件的上下文。特别好用。
在item.vue中：
setup() {
以上是vue3.0打包轮播组件的步骤细节。更多关于vue3.0打包转盘组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。