vue3+Pinia+TypeScript?實(shí)現(xiàn)封裝輪播圖組件
為什么封裝?
- 迎合es6模塊化開(kāi)發(fā)思想
- 注冊(cè)為全局組件,可以更好地復(fù)用,需要用到的地方,直接使用標(biāo)簽即可
靜態(tài)結(jié)構(gòu) 后面再進(jìn)行更改
<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="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg" alt="" /> </RouterLink> </li> <li class="carousel-item"> <RouterLink to="/"> <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg" alt="" /> </RouterLink> </li> <li class="carousel-item"> <RouterLink to="/"> <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.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>
請(qǐng)求數(shù)據(jù)都存放在pinia里面
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 } } })
類(lèi)型檢測(cè)
// 所有的接口的通用類(lèi)型 export interface IApiRes<T> { msg: string, result: T } // 輪播圖數(shù)據(jù)中的項(xiàng) export type BannerItem = { id: string; imgUrl: string; hrefUrl: string; type: string; }
頁(yè)面級(jí)組件
<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, // 是否開(kāi)啟自動(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 } } // 如果開(kāi)啟了自動(dòng)播放,則每隔duration去播放下一張: hNext() onMounted(() => { start() }) onBeforeUnmount(() => { stop() }) let timer = -1 // 鼠標(biāo)離開(kāi)要繼續(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; // 不可見(jiàn) transition: opacity 0.5s linear; &.fade { opacity: 1; // 可見(jiàn) 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)封裝輪播圖組件的文章就介紹到這了,更多相關(guān)vue3 封裝輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3結(jié)合typescript中使用class封裝axios
- vue3+vite3+typescript實(shí)現(xiàn)驗(yàn)證碼功能及表單驗(yàn)證效果
- 使用Vite+Vue3+TypeScript?搭建開(kāi)發(fā)腳手架的詳細(xì)過(guò)程
- vue?props使用typescript自定義類(lèi)型的方法實(shí)例
- 基于Vue3+TypeScript的全局對(duì)象的注入和使用詳解
- Vue3+TypeScript+Vite使用require動(dòng)態(tài)引入圖片等靜態(tài)資源
- Vue+TypeScript中處理computed方式
- vue項(xiàng)目中使用ts(typescript)入門(mén)教程
- vue3中如何使用vue-types
相關(guān)文章
json數(shù)據(jù)處理技巧(字段帶空格、增加字段、排序等等)
json數(shù)據(jù)處理技巧例如:正常取值、字段帶空格、賦值、增加字段、排序、拷貝、數(shù)組添加和刪除等,詳細(xì)請(qǐng)參考本文或許對(duì)你有所幫助2013-06-06mint-ui的search組件在鍵盤(pán)顯示搜索按鈕的實(shí)現(xiàn)方法
這篇文章主要介紹了mint-ui的search組件在鍵盤(pán)顯示搜索按鈕的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能(附源碼)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能(附源碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12利用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器
日期選擇器在我們平時(shí)開(kāi)發(fā)的時(shí)候經(jīng)常要用到,下面這篇文章主要給大家介紹了利用Query+bootstrap和js這兩種方式實(shí)現(xiàn)日期選擇器的方法,文中兩種方法都給出了詳細(xì)的示例代碼,有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01JS模擬實(shí)現(xiàn)京東快遞單號(hào)查詢(xún)
這篇文章主要為大家詳細(xì)介紹了JS模擬實(shí)現(xiàn)京東快遞單號(hào)查詢(xún),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JS使用Promise控制請(qǐng)求并發(fā)數(shù)
現(xiàn)在面試過(guò)程當(dāng)中 ,手寫(xiě)題必然是少不了的,其中碰到比較多的無(wú)非就是當(dāng)屬 請(qǐng)求并發(fā)控制了,所以本文為大家整理了JS使用Promise控制請(qǐng)求并發(fā)數(shù)的示例代碼,希望對(duì)大家有所幫助2023-05-05