vue|vue3——自己封装轮播图效果 vue|vue.js

【vue|vue3——自己封装轮播图效果】
目录

前言
一、为什么封装？
二、如何封装？
- 1. 准备
- 2. 注册为全局组件
- 3. 使用演示
总结

前言 vue3项目中如何封装自己的轮播图效果组件呢，希望轮播图可以控制是否自动轮播，当鼠标悬停的时候停止自动轮播。点击左右切换或者分页指示器可以切换图片。这些功能是如何实现的呢？又是如何通过插件方式注册为全局组件的呢？一起来看看如何实现的吧~
一、为什么封装？

为了迎合es6模块化开发思想
注册为全局组件，可以更好地复用，需要用到的地方，直接使用标签即可

二、如何封装？ 1. 准备像之前vue3——自己封装骨架屏效果这篇博文一样的操作，通过vue插件的方式注册为全局组件。
项目中需要用到的全局组件可以统一都放到src/components目录下，新建xx.vue文件，名称自定义。
代码如下（示例）：

> import { ref, watch, onUnmounted } from 'vue' export default {name: 'Carousel', props: {list: {type: Array, default: () => [] }, duration: {type: Number, default: 3000 }, autoPlay: {type: Boolean, default: false } }, setup (props) {const index = ref(0) let timer = null // 自动播放 const autoPlayFn = () => {clearInterval(timer) timer = setInterval(() => {index.value++ if (index.value >= props.list.length) {index.value = https://www.it610.com/article/0 } }, props.duration) }// 鼠标进入停止，移出开启自动，前提条件：autoPlay为true const stop = () => {if (timer) clearInterval(timer) } const start = () => {if (props.list.length && props.autoPlay) {autoPlayFn() } }// 轮播图左右按钮切换效果 const toggle = (step) => {index.value += step// 确定右侧临界值 if (index.value >= props.list.length) {index.value = https://www.it610.com/article/0 return } // 确定左侧临界值 if (index.value < 0) {index.value = props.list.length - 1 } }watch(() => props.list, (newVal) => {// 有数据&开启自动播放，才调用自动播放函数 if (newVal.length > 1 && props.autoPlay) {index.value = https://www.it610.com/article/0 autoPlayFn() } }, { immediate: true })// 组件消耗，清理定时器 onUnmounted(() => {clearInterval(timer) })return { index, stop, start, toggle } } } lang="less"> .carousel{width: 100%; height: 100%; min-width: 300px; min-height: 150px; position: relative; border: 1px solid #ccc; text-decoration: none; .carousel{&-body {width: 100%; height: 100%; } &-item {width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; list-style: none; transition: opacity 0.5s linear; &.fade {opacity: 1; z-index: 1; } img {width: 100%; height: 100%; } } &-indicator {position: absolute; left: 0; bottom: 20px; z-index: 2; width: 100%; text-align: center; span {display: inline-block; width: 12px; height: 12px; background: rgba(0,0,0,0.2); border-radius: 50%; cursor: pointer; ~ span {margin-left: 12px; } &.active {background:#fff; } } } &-btn {width: 44px; height: 44px; background: rgba(0,0,0,.2); color: #fff; border-radius: 50%; position: absolute; top: 228px; z-index: 2; text-align: center; line-height: 44px; opacity: 0; font-family: serif; text-decoration: none; transition: all 0.5s; &.prev{left: 20px; } &.next{right: 20px; } } } &:hover {.carousel-btn {opacity: 1; } } }

2. 注册为全局组件在src/components目录下新建index.js文件
代码如下（示例）：

import xx from './library/xx.vue' // vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展 // vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展 export default {install (app) {app.component(xx.name, xx) } }

在main.js中注册为插件

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store'import myUI from './components'createApp(App).use(store).use(router).use(myUI).mount('#app')

3. 使用演示将全局组件需要的通过自定义属性传递过去，这里使用固定数据模拟一下。
可以在全局组件外层包裹一个div元素，控制轮播图组件的大小

duration ：若不传，默认自动轮播时间为3s
autoPlay：若不传，默认不自动轮播

代码如下（示例）：

>export default {name: 'App', setup() {const list = [ { id: 1, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fcloud.jpeg' }, { id: 2, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fground.jpeg' }, { id: 3, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fnight.jpeg' }, { id: 4, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fstreet.jpeg' }, { id: 5, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fsun.jpeg' } ]return { list } } } lang="less" scoped> .home-banner {margin: 0 auto; width: 960px; height: 540px; }

效果图(如下)：

总结自动轮播、悬停停止、点击切换的效果均已实现，各位小伙伴喜欢的话可以复制代码本地看看效果哦~