接著上一篇文章，熟悉vue3.0的基本用法，和使用一段時(shí)間以后，開(kāi)始準(zhǔn)備開(kāi)發(fā)適用于vue3.0使用的pc端的組件庫(kù)。會(huì)陸續(xù)跟新一些組件庫(kù)的寫(xiě)法和注意事項(xiàng)，有興趣的同學(xué)可以多多關(guān)注哦，不多bb，開(kāi)始。

開(kāi)發(fā)一個(gè)輪播圖組件，適用pc端，(暫無(wú)考慮app), 使用于vue3.0 + TS

大致的實(shí)現(xiàn)效果是這樣：

圖片自由輪播，對(duì)應(yīng)圓點(diǎn)圖片跳轉(zhuǎn)，左右指示器跳轉(zhuǎn)等。暴露以下options配置：

以上是主要的options，下面展開(kāi)來(lái)說(shuō)一下具體如何封裝。

在vue3.0和vue2.0中封裝組件其實(shí)核心思想都是一樣的，需要使用到vue.component();對(duì)組件進(jìn)行注冊(cè)，之后在main.ts中掛載一下就可以使用。

在 src下面創(chuàng)建： src --> libs --> sqm_ui(自己UI庫(kù)的名稱）-->index.js

這里的index.js就是注冊(cè)組件的入口。

同級(jí)目錄下新建一個(gè)文件， Carousel， 這個(gè)文件包含所有的輪播組件的功能和樣式。

目錄如下：

要注意一點(diǎn)： 雖然是在vue3.0和ts中使用，但是入口文件還是用js，這也是為了可以適用非ts寫(xiě)法。

在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使用，我們需要新建一個(gè)index.d.ts文件，用來(lái)描述庫(kù)中成員類型來(lái)給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);二：封裝流程

對(duì)于輪播圖而言，我們需要一個(gè)固定的容器，來(lái)放置每一張滾動(dòng)的圖片，這時(shí)候我們需要定義一個(gè)Carousel.vue組件。

<template> <div class='carousel'> <slot></slot> // 這里的slot是用來(lái)放置item組件 </div></template>

還需要一個(gè)用來(lái)存儲(chǔ)照片的組件，item.vue

<template> <div class='carousel-item'> <slot></slot> // 這里的slot是用來(lái)放置img </div></template>

基本框架搭好，當(dāng)用戶使用的時(shí)候在carousel中配置options。

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

在carousel.vue中：接受傳來(lái)的配置項(xiàng)

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): 實(shí)現(xiàn)autoPlay：

在carousel.vue中：

const autoPlay = () => { if (props.autoplay) { t = setInterval(() => { // 輪播邏輯 }, props.duration);};onMounted(() => { autoPlay();});

邏輯很簡(jiǎn)單，定義一個(gè)autoPlay函數(shù)，在mounted階段掛載。

(2): 實(shí)現(xiàn)輪播：

想這樣一個(gè)問(wèn)題：如何才能讓這一張圖片顯示？一定需要當(dāng)前圖片的index，等于輪播時(shí)的index才可以顯示。

在item.vue中：

<div v-if='selfIndex === currentIndex'> <slot></slot> </div>

只有當(dāng)自身的index，等于當(dāng)前的index的時(shí)候才能顯示。

獲取currentIndex：

vue3.0中內(nèi)置方法： getCurrentInstance()

這是一個(gè)很重要的方法，通過(guò)這個(gè)方法我們可以獲取當(dāng)前組件的實(shí)例，然后通過(guò)ctx獲取該組件的上下文。特別好用。

在item.vue中：

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

在instance.vnode下面有個(gè)key是每個(gè)圖片對(duì)應(yīng)的自身的key也就是index。

在instance.parent.ctx 下面有個(gè)定義的currentIndex，是當(dāng)前的index。

當(dāng)二者相同時(shí)，可以顯示當(dāng)前圖片。那么currentIndex在哪里設(shè)置呢？

回到carousel.vue中：

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

當(dāng)前的currentIndex就是傳入的initial的值。

在autoPlay中：執(zhí)行輪播

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; } });

當(dāng)next的時(shí)候，讓currentIndex++； 直到等于輪播圖片的長(zhǎng)度。(array.length)

當(dāng)prev的時(shí)候， 讓currentIndex--； 直到=== -1

之后在item.vue中監(jiān)聽(tīng)一下：

watch(() => { return instance.parent.ctx.currentIndex }, (value) => { state.currentIndex = value; })

這樣就完成圖片的輪播。

實(shí)現(xiàn)的思想還是很簡(jiǎn)單的：

通過(guò)傳入的hasDot來(lái)確定需不需要顯示。傳入itemLen根據(jù)圖片的數(shù)量來(lái)確定顯示幾個(gè)圓點(diǎn)，點(diǎn)擊圓點(diǎn)可以跳轉(zhuǎn)到對(duì)應(yīng)的圖片上。

在dot.vue中：

<template> <div v-if='hasDot'> <div v-for='item in itemLen' :key='item'> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' : @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>

通過(guò)ctx觸發(fā)dotClick事件，把index傳入，在父組件中使用(Carousel.vue):

@dotClick='dotClick'const dotClick = (index: any): void => {state.currentIndex = index;};

這樣完成了圓點(diǎn)指示器。

這個(gè)很簡(jiǎn)單，就是移入的時(shí)候顯示，然后點(diǎn)擊圖片滑動(dòng)。

<template> <div v-if='showDir'> <div v-if='dir === ’next’'> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' @click='dirClick(dir)'>&gt;</a> </div> <div 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>

一樣的傳給父組件一個(gè)dirClick事件，在父組件中執(zhí)行點(diǎn)擊移動(dòng)就可以了。

因?yàn)檩啿D是通過(guò)定時(shí)器實(shí)現(xiàn)的需要銷毀定時(shí)器。

onBeforeUnmount(() => { _clearFunction();});function _clearFunction(): void { clearInterval(t); t= null;};

在鼠標(biāo)移入時(shí)停止自動(dòng)播放，顯示左右指示器：

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

在鼠標(biāo)移出時(shí)開(kāi)始播放， 左右指示器消失

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

ok. 大體的思想就是這樣，還有一些細(xì)節(jié)可以自己再多想想。感謝！！

www.jb51.net/article/206833.htm

以上就是vue3.0封裝輪播圖組件的步驟的詳細(xì)內(nèi)容，更多關(guān)于vue3.0封裝輪播圖組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！