今天就跟大家聊聊有关使用Vue + ts封装一个轮播插件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>背景
最近在学习ts,打算用ts写一个练手项目,参照的网站内容是wanandroid,这个接触过android开发的同学可能更我了解一些,其实一开始是打算后台全部都自己写的,不过奈何一个懒字,所以现在的打算就是自己实现登录注册简单的逻辑。这些都不重要,一开始实现轮播是打算在Vue中引入轮播图偷窃者。js,后来想想还是自己写算了。也当作熟悉ts。先上效果图(这里没有动态图片,各位同学可以自己实现)
ts文件
& lt; !——vue实现轮播图——比;
& lt; template>
& lt; div id=皊wiperDIV":@mouseover=皊uspend"@mouseout=癮utoPlay"@blur=皊uspend"
@focus=癮utoPlay"比;
& lt; !——淡入淡出效果——比;
& lt;转变组标签=皍l"类=癷mg-list":name=癮nimation"比;
& lt;李v=癰annerList"(项目,指数);:关键=癷tem.id"v-show=癱urIndex===index"比;
& lt; img src=https://www.yisu.com/zixun/"项目(nameField) ">
李
进口{
组件,
道具,
Vue
}& # 39;vue-property-decorator& # 39;
从& # 39;进口{旗帜}@ bean/指数# 39;//首页横幅图
@ component ({
名称:& # 39;偷窃者# 39;
组件:{},
})
出口的默认类IndexPage延伸Vue {
@Prop({默认:6000})私人超时:数量;//默认的切换横幅图的时长
@Prop({默认:400})私人高度:数字|字符串;//横幅区域高度
@Prop({默认值:()=比;[][]})私人bannerList:横幅;//传入的图片数组
@Prop({默认值:& # 39;imagePath& # 39;})私人nameField:字符串;//图片地址对应的字段名
@Prop({违约:真})私人showPagination:布尔;//是否显示底部原点分页器
@Prop({默认值:false})私人showBtn:布尔;//是否显示左右的切换按钮
@Prop ({
默认值:& # 39;消退# 39;,验证器:功能(价值){
让arr=[& # 39;消退# 39;& # 39;翻译# 39;】
返回arr.includes(价值);
}})私人动画:字符串;//是否显示左右的切换按钮
私人计时器:任何;
私人curIndex:数量=0;
():创建空白{
this.autoPlay ()
}//生命周期钩
安装():空白{
}//方法
私人handleSelect () {
}//自动播放图片
私人播放(){
clearInterval (this.timer)//还是一样,开启定时器之前需要先清除一下,防止bug
这一点。计时器=setInterval(这一点。nextClick,这。超时数量)
}//切换下一个横幅图片
私人nextClick () {
this.curIndex + +;
如果这一点。curIndex祝辞=this.bannerList.length) {
这一点。curIndex=0;
}
}//切换上一个图片
私人preClick () {
this.curIndex + +;
如果这一点。curIndex祝辞=this.bannerList.length) {
这一点。curIndex=0;
}
}//暂停的方法
私人暂停(){
clearInterval (this.timer)
}//点击底部原点按钮调整方法
私人跳(bannerItem:横幅,指数:数字){
这一点。curIndex=指数;
}
{//私人animationMethodValidator():字符串//}
}使用Vue + ts封装一个轮播插件
