怎么使用vue3+Pinia+TypeScript实现封装轮播图组件(pinia,typescript,vue3,开发技术)

这篇文章主要介绍“怎么使用vue3+Pinia+TypeScript实现封装轮播图组件”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用vue3+Pinia+TypeScript实现封装轮播图组件”文章能帮助大家解决问题。

为什么封装？

• 迎合es6模块化开发思想

• 注册为全局组件，可以更好地复用，需要用到的地方，直接使用标签即可

静态结构 后面再进行更改

<scriptlang="ts"setupname="XtxCarousel">defineProps()</script><template><divclass="xtx-carousel"><ulclass="carousel-body"><liclass="carousel-itemfade"><RouterLinkto="/"><imgsrc="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/mxwx3jpuv02.jpg"alt=""/></RouterLink></li><liclass="carousel-item"><RouterLinkto="/"><imgsrc="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/mxwx3jpuv02.jpg"alt=""/></RouterLink></li><liclass="carousel-item"><RouterLinkto="/"><imgsrc="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/mxwx3jpuv02.jpg"alt=""/></RouterLink></li></ul><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="carousel-btnprev"><iclass="iconfonticon-angle-left"></i></a><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="carousel-btnnext"><iclass="iconfonticon-angle-right"></i></a><divclass="carousel-indicator"><spanclass="active"></span><span></span><span></span><span></span><span></span></div></div></template><stylescopedlang="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:opacity0.5slinear;&.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:all0.5s;&.prev{left:20px;}&.next{right:20px;}}}&:hover{.carousel-btn{opacity:1;}}}</style>

请求数据都存放在pinia里面

import{defineStore}from'pinia'importrequestfrom'@/utils/request'import{BannerItem,IApiRes}from'@/types/data'exportdefaultdefineStore('home',{persist:{enabled:true},state(){return{bannerList:[]asBannerItem[]}},actions:{//拿轮播图数据asyncgetBannerList(){constres=awaitrequest.get<IApiRes<BannerItem[]>>('/home/banner')console.log('拿轮播图数据',res)this.bannerList=res.data.result}}})

类型检测

//所有的接口的通用类型exportinterfaceIApiRes<T>{msg:string,result:T}//轮播图数据中的项exporttypeBannerItem={id:string;imgUrl:string;hrefUrl:string;type:string;}

页面级组件

<scriptlang="ts"setup>importuseStorefrom'@/store';const{home}=useStore()//发请求home.getBannerList()</script><template><divclass="home-banner"><!--轮播图子组件--><XtxCarousel:slides="home.bannerList":autoPlay="true":duration="1000"/></div></template><stylescopedlang="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>

全局组件

<scriptlang="ts"setupname="XtxCarousel">import{BannerItem}from'@/types/data'import{onBeforeUnmount,onMounted,ref}from'vue';//定义propsconst{slides,autoPlay,duration}=defineProps<{slides:BannerItem[],autoPlay?:boolean,//是否开启自动播放duration?:number//自动播放的间隔时间}>()//当前哪个图片选中高亮constactive=ref(1)//点击右侧箭头++consthNext=()=>{active.value++if(active.value===slides.length){active.value=0}}//点击左侧箭头--consthPrev=()=>{active.value--if(active.value<0){active.value=slides.length-1}}//如果开启了自动播放，则每隔duration去播放下一张：hNext()onMounted(()=>{start()})onBeforeUnmount(()=>{stop()})lettimer=-1//鼠标离开要继续播放conststart=()=>{if(autoPlay){timer=window.setInterval(()=>{hNext()},duration)}}//鼠标hover要暂停播放conststop=()=>{clearInterval(timer)}</script><template><divclass="xtx-carousel"@mouseleave="start()"@mouseenter="stop()"><ulclass="carousel-body"><liclass="carousel-item":class="{fade:idx===active}"v-for="(it,idx)inslides":key="it.id"><RouterLinkto="/"><img:src="it.imgUrl"alt=""/></RouterLink></li></ul><a@click="hPrev"href="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="carousel-btnprev"><iclass="iconfonticon-angle-left"></i></a><a@click="hNext"href="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="carousel-btnnext"><iclass="iconfonticon-angle-right"></i></a><divclass="carousel-indicator"><spanv-for="(it,idx)inslides":class="{active:active===idx}"@mouseenter="active=idx"></span></div></div></template><stylescopedlang="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:opacity0.5slinear;&.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:all0.5s;&.prev{left:20px;}&.next{right:20px;}}}&:hover{.carousel-btn{opacity:1;}}}</style>

关于“怎么使用vue3+Pinia+TypeScript实现封装轮播图组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。