vue3.0封裝輪播圖組件的步驟
接著上一篇文章，熟悉vue3.0的基本用法，和使用一段時(shí)間以后，開始準(zhǔn)備開發(fā)適用于vue3.0使用的pc端的組件庫。會(huì)陸續(xù)跟新一些組件庫的寫法和注意事項(xiàng)，有興趣的同學(xué)可以多多關(guān)注哦，不多bb，開始。
開發(fā)一個(gè)輪播圖組件，適用pc端，(暫無考慮app), 使用于vue3.0 + TS
大致的實(shí)現(xiàn)效果是這樣：
圖片自由輪播，對(duì)應(yīng)圓點(diǎn)圖片跳轉(zhuǎn)，左右指示器跳轉(zhuǎn)等。暴露以下options配置：
以上是主要的options，下面展開來說一下具體如何封裝。
一：封裝思想
在vue3.0和vue2.0中封裝組件其實(shí)核心思想都是一樣的，需要使用到vue.component();對(duì)組件進(jìn)行注冊(cè)，之后在main.ts中掛載一下就可以使用。
在 src下面創(chuàng)建： src --> libs --> sqm_ui(自己UI庫的名稱）-->index.js
這里的index.js就是注冊(cè)組件的入口。
同級(jí)目錄下新建一個(gè)文件， Carousel， 這個(gè)文件包含所有的輪播組件的功能和樣式。
目錄如下：
要注意一點(diǎn)： 雖然是在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使用，我們需要新建一個(gè)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);
二：封裝流程
對(duì)于輪播圖而言，我們需要一個(gè)固定的容器，來放置每一張滾動(dòng)的圖片，這時(shí)候我們需要定義一個(gè)Carousel.vue組件。
<template> <div class="carousel"> <slot></slot> // 這里的slot是用來放置item組件 </div> </template>
還需要一個(gè)用來存儲(chǔ)照片的組件，item.vue
<template> <div class="carousel-item"> <slot></slot> // 這里的slot是用來放置img </div> </template>
基本框架搭好，當(dāng)用戶使用的時(shí)候在carousel中配置options。
<carousel :autoPlay="true" :durdation="3000" :initial="3" :hasDot="true" :hasDirector="true"> </carousel>
在carousel.vue中：接受傳來的配置項(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è)問題：如何才能讓這一張圖片顯示？一定需要當(dāng)前圖片的index，等于輪播時(shí)的index才可以顯示。
在item.vue中：
<div class="carsel-item" v-if="selfIndex === currentIndex"> <slot></slot> </div>
只有當(dāng)自身的index，等于當(dāng)前的index的時(shí)候才能顯示。
獲取currentIndex：
vue3.0中內(nèi)置方法： getCurrentInstance()
這是一個(gè)很重要的方法，通過這個(gè)方法我們可以獲取當(dāng)前組件的實(shí)例，然后通過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)聽一下：
watch(() => {
return instance.parent.ctx.currentIndex
}, (value) => {
state.currentIndex = value;
})
這樣就完成圖片的輪播。
三： 圓點(diǎn)指示器
實(shí)現(xiàn)的思想還是很簡(jiǎn)單的：
通過傳入的hasDot來確定需不需要顯示。傳入itemLen根據(jù)圖片的數(shù)量來確定顯示幾個(gè)圓點(diǎn)，點(diǎn)擊圓點(diǎn)可以跳轉(zhuǎn)到對(duì)應(yīng)的圖片上。
在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觸發(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 class="director dir-next" v-if="dir === 'next'">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="dirClick(dir)">></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)"><</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是通過定時(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í)開始播放， 左右指示器消失
const mouseLeave = (): void => {
autoPlay();
state.showDir = false;
};
ok. 大體的思想就是這樣，還有一些細(xì)節(jié)可以自己再多想想。感謝??！
六：往期回顧
www.dhdzp.com/article/206833.htm
以上就是vue3.0封裝輪播圖組件的步驟的詳細(xì)內(nèi)容，更多關(guān)于vue3.0封裝輪播圖組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了詳解Vue項(xiàng)目部署遇到的問題及解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
本文主要介紹了Vue?3.0中的setup函數(shù),包括其概述、使用場(chǎng)景和具體用法,通過本文的介紹,我們可以看到,setup函數(shù)是用來將組件的狀態(tài)和行為進(jìn)行分離的一個(gè)重要工具,感興趣的朋友跟隨小編一起看看吧2024-11-11
Vue項(xiàng)目中使用iView組件庫設(shè)置樣式不生效的解決方案
這篇文章主要介紹了Vue項(xiàng)目中使用iView組件庫設(shè)置樣式不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(防止連點(diǎn)、封裝復(fù)用)
這篇文章主要介紹了vue3發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(防止連點(diǎn)、封裝復(fù)用),實(shí)現(xiàn)思路是點(diǎn)擊發(fā)送驗(yàn)證碼，驗(yàn)證碼倒計(jì)時(shí)，校驗(yàn)手機(jī)號(hào)是否正常等一系列操作，本文通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入
本文主要介紹了element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的方法
這篇文章主要為大家詳細(xì)介紹了vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了Vue實(shí)現(xiàn)全局菜單搜索框的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
淺談在vue-cli3項(xiàng)目中解決動(dòng)態(tài)引入圖片img404的問題
這篇文章主要介紹了淺談在vue-cli3項(xiàng)目中解決動(dòng)態(tài)引入圖片img404的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue3 銷毀組件方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue3導(dǎo)航欄組件封裝實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Vue3導(dǎo)航欄組件封裝的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09