您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么使用vue3+Pinia+TypeScript實(shí)現(xiàn)封裝輪播圖組件”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“怎么使用vue3+Pinia+TypeScript實(shí)現(xiàn)封裝輪播圖組件”文章能幫助大家解決問題。
迎合es6模塊化開發(fā)思想
注冊(cè)為全局組件,可以更好地復(fù)用,需要用到的地方,直接使用標(biāo)簽即可
<script lang="ts" setup name="XtxCarousel"> defineProps() </script> <template> <div class="xtx-carousel"> <ul class="carousel-body"> <li class="carousel-item fade"> <RouterLink to="/"> <img src="https://cache.yisu.com/upload/information/20220725/112/220.jpg" alt="" /> </RouterLink> </li> <li class="carousel-item"> <RouterLink to="/"> <img src="https://cache.yisu.com/upload/information/20220725/112/220.jpg" alt="" /> </RouterLink> </li> <li class="carousel-item"> <RouterLink to="/"> <img src="https://cache.yisu.com/upload/information/20220725/112/220.jpg" alt="" /> </RouterLink> </li> </ul> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="carousel-btn prev" ><i class="iconfont icon-angle-left"></i ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="carousel-btn next" ><i class="iconfont icon-angle-right"></i ></a> <div class="carousel-indicator"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </template> <style scoped lang="less"> .xtx-carousel { width: 100%; height: 100%; min-width: 300px; min-height: 150px; position: relative; .carousel { &-body { width: 100%; height: 100%; } &-item { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; 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, 0.2); color: #fff; border-radius: 50%; position: absolute; top: 228px; z-index: 2; text-align: center; line-height: 44px; opacity: 0; transition: all 0.5s; &.prev { left: 20px; } &.next { right: 20px; } } } &:hover { .carousel-btn { opacity: 1; } } } </style>
import { defineStore } from 'pinia' import request from '@/utils/request' import { BannerItem, IApiRes } from '@/types/data' export default defineStore('home', { persist: { enabled: true }, state() { return { bannerList: [] as BannerItem[] } }, actions: { // 拿輪播圖數(shù)據(jù) async getBannerList() { const res = await request.get<IApiRes<BannerItem[]>>('/home/banner') console.log('拿輪播圖數(shù)據(jù)', res) this.bannerList = res.data.result } } })
// 所有的接口的通用類型 export interface IApiRes<T> { msg: string, result: T } // 輪播圖數(shù)據(jù)中的項(xiàng) export type BannerItem = { id: string; imgUrl: string; hrefUrl: string; type: string; }
<script lang="ts" setup> import useStore from '@/store'; const { home } = useStore() // 發(fā)請(qǐng)求 home.getBannerList() </script> <template> <div class="home-banner"> <!-- 輪播圖子組件 --> <XtxCarousel :slides="home.bannerList" :autoPlay="true" :duration="1000"/> </div> </template> <style scoped lang="less"> .home-banner { width: 1240px; height: 450px; position: absolute; left: 0; top: 0; z-index: 98; background-color: #ccc; } /deep/ .xtx-carousel .carousel-btn.prev { left: 270px !important; } /deep/ .xtx-carousel .carousel-indicator { padding-left: 250px; } </style>
<script lang="ts" setup name="XtxCarousel"> import { BannerItem } from '@/types/data' import { onBeforeUnmount, onMounted, ref } from 'vue'; // 定義props const { slides, autoPlay, duration } = defineProps<{ slides: BannerItem[], autoPlay?: boolean, // 是否開啟自動(dòng)播放 duration?: number // 自動(dòng)播放的間隔時(shí)間 }>() // 當(dāng)前哪個(gè)圖片選中 高亮 const active = ref(1) // 點(diǎn)擊右側(cè)箭頭++ const hNext = () => { active.value++ if(active.value === slides.length){ active.value = 0 } } // 點(diǎn)擊左側(cè)箭頭-- const hPrev = () => { active.value-- if(active.value < 0){ active.value = slides.length - 1 } } // 如果開啟了自動(dòng)播放,則每隔duration去播放下一張: hNext() onMounted(() => { start() }) onBeforeUnmount(() => { stop() }) let timer = -1 // 鼠標(biāo)離開要繼續(xù)播放 const start = () => { if(autoPlay) { timer = window.setInterval(() => { hNext() }, duration) } } // 鼠標(biāo)hover要暫停播放 const stop = () => { clearInterval(timer) } </script> <template> <div class="xtx-carousel" @mouseleave="start()" @mouseenter="stop()"> <ul class="carousel-body"> <li class="carousel-item" :class="{ fade: idx === active}" v-for="(it, idx) in slides" :key="it.id"> <RouterLink to="/"> <img :src="it.imgUrl" alt="" /> </RouterLink> </li> </ul> <a @click="hPrev" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a> <a @click="hNext" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a> <div class="carousel-indicator"> <span v-for="(it, idx) in slides" :class="{ active: active===idx}" @mouseenter="active = idx" ></span> </div> </div> </template> <style scoped lang="less"> .xtx-carousel { width: 100%; height: 100%; min-width: 300px; min-height: 150px; position: relative; .carousel { &-body { width: 100%; height: 100%; } &-item { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; // 不可見 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, 0.2); color: #fff; border-radius: 50%; position: absolute; top: 228px; z-index: 2; text-align: center; line-height: 44px; opacity: 0; transition: all 0.5s; &.prev { left: 20px; } &.next { right: 20px; } } } &:hover { .carousel-btn { opacity: 1; } } } </style>
關(guān)于“怎么使用vue3+Pinia+TypeScript實(shí)現(xiàn)封裝輪播圖組件”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。