如何将Vue3.0封装成长尾词的轮播图组件步骤？

本文共计2044个文字，预计阅读时间需要9分钟。

接上文，熟悉Vue 3.0的基本用法后，以下是一些适用于Vue 3.0的PC端组件库的准备工作：

1. 了解组件库基础： - 熟悉组件库的基本概念，如组件的封装、props、slots、events等。 - 阅读组件库的文档，了解其设计理念和核心功能。

2. 环境搭建： - 确保你的开发环境已安装Node.js和npm。 - 创建一个新的Vue项目，可以使用Vue CLI或Vite。

3. 引入组件库： - 通过CDN或npm安装你选择的Vue组件库，如Element Plus、Ant Design Vue等。 - 在你的Vue项目中引入组件库，通常是通过在main.js中全局注册。

4. 组件使用： - 在Vue组件中使用组件库提供的组件，如``、``等。 - 根据文档学习如何使用组件的props、slots和events。

5. 样式定制： - 了解如何定制组件库的样式，以满足项目需求。 - 使用SCSS或CSS模块进行样式覆盖。

6. 实践与进阶： - 实践使用组件库构建实际的项目，积累经验。 - 学习组件库的高级用法，如组件的扩展、自定义指令等。

7. 关注新组件库： - 随着Vue 3.0的不断发展，新的组件库会不断出现。 - 关注Vue社区，了解最新的组件库动态。

8. 交流与分享： - 加入Vue社区，与其他开发者交流使用经验。 - 分享你的学习心得和项目经验，帮助他人。

有兴趣的同学可以多多关注，不断学习和进步。

接着上一篇文章，熟悉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中：

import Carousel from './Carousel/carousel'; import CarItem from './Carousel/item';let SqmUI = {}; SqmUI.install = function(vue) { vue.component(Carousel.name, Carousel); vue.component(CarItem.name,CarItem); }; export default SqmUI;

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

declare const _default: ({ install: (app: import("vue").App<any>, ...options: any[]) => any; // 这里单纯描述一下install}); export default _default;

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

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

二：封装流程

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

<template> <div class="carousel"> <slot></slot> // 这里的slot是用来放置item组件 </div> </template>

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

<template> <div class="carousel-item"> <slot></slot> // 这里的slot是用来放置img </div> </template>

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

<carousel :autoPlay="true" :durdation="3000" :initial="3" :hasDot="true" :hasDirector="true"> </carousel>

在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中：

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

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

(2): 实现轮播：

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

在item.vue中：

<div class="carsel-item" v-if="selfIndex === currentIndex"> <slot></slot> </div>

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

获取currentIndex：

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

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

在item.vue中：

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

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

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

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

回到carousel.vue中：

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

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

在autoPlay中：执行轮播

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 class="dot-goes-wrapper" v-if="hasDot"> <div class="dot-item" v-for="item in itemLen" :key="item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dot-link" :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 class="director dir-next" v-if="dir === 'next'"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="dirClick(dir)">&gt;</a> </div> <div class="director dir-prev" v-else-if="dir === 'prev'"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @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. 大体的思想就是这样，还有一些细节可以自己再多想想。感谢！！

六：往期回顾

www.jb51.net/article/206833.htm

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