vue轮播插件,vue轮播组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现可复用轮播组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文用某视频剪辑软件简单的实现了一个轮播图的基础功能，并抽离出来作为一个公共组件，方便复用
超文本标记语言和射流研究…部分
模板
差异
class=img-box
ref=img-box
:style={width: styles.width，height: styles.height}
中的div v-for=(项目，索引)
:key=index
class=img-item
:ref=img-item- index
:class= { active :index===active }
图片
:src=item
style=宽度：100%
:style={height: styles.height}
/
/div
差异
class=img-position
v-if= isshowsposition
模板imgList中的v-for=(item，index
span :key=index
class=img-position-item
:ref= 图像位置-索引
:class=[
{active: index===active}，
isCircle？圆圈":",
伊斯努姆？nums :
]
@click=clickSpan(index)
{{isNums？索引1 : }}
/span
/模板
/div
差异
class=left-btn
v-if=isShowLeftOrRightBtn
@click=clickBtn(left )
i class=iconfont roll-zuo/i
/div
差异
正确的
v-if=isShowLeftOrRightBtn
@click=clickBtn(right )
i class=iconfont roll-you/i
/div
/div
/模板
脚本
导出默认值{
名称：滚动，
道具：{
imgList: { //图片列表科学研究委员会数组
类型：数组，
默认值：()=[]
},
isshowsposition:{//是否显示下方小圆点
类型：布尔型，
默认值：真
},
positionInner: { //圆点内容
类型：字符串，
默认：圆形//默认圆点，可选值圆圈=圆点数量=数字两者=圆点数字
},
isShowLeftOrRightBtn: { //是否显示左右按钮
类型：布尔型，
默认值：真
},
持续时间：{ //切换间隔
类型：[数字，字符串],
默认值：3000
},
样式：{ //自定义轮播图片宽高默认500*300
类型：对象，
默认值：()={
返回{
宽度："500像素",
高度："300像素"
}
}
}
},
data () {
返回{
活动：0,//当前轮播图片
计时器：null //定时器
}
},
计算值：{
isCircle () {
返回[圆圈，两者].包括(this.positionInner)
},
isNums () {
返回[num ， both].包括(this.positionInner)
}
},
已更新(){
if (this.timer) this.clearTimer()
this.setTimer()
},
已创建(){
this.setTimer()
},
方法：{
单击跨度(索引){
this.clearTimer()
this.active=index
},
单击Btn (arg) {
this.clearTimer()
if (arg===left) {
this.active=this.active - 1 0？这个。img列表。长度-1:这个。活动-1
}否则{
这个。主动=这个。主动1===这个。img列表。长度？0 : this.active 1
}
this.setTimer()
},
setTimer () {
this.timer=setInterval(()={
this.clickBtn(右)
},编号(此持续时间))
},
clearTimer () {
clearInterval(this.timer)
this.timer=null
}
}
}
/脚本
钢性铸铁样式部分
样式范围
@ import URL(//at。alicdn。com/t/font _ 1451815 _ senarwrqu 6。CSS’)；
* {
边距：0;
填充：0;
}。img-box {
位置：相对；
边距：0自动；
}。img-项目{
身高：100%;
宽度：100%;
不透明度：0;
位置：绝对；
top:0；
右：0;
左：0;
底部：0;
z指数：-5;
文本对齐：居中；
}。img-item.active {
z指数：0;
不透明度：1;
过渡：3s；
}。img-位置{
位置：绝对；
底部：5px
左：50%;
显示器：flex
transform: translate(-50%，0)；
}。图像-位置-项目{
显示：内嵌-块；
宽度：10px
高度：10px
框大小：边框-框；
光标：指针；
}。img-position-item.circle {
边界半径：50%;
边框：1px纯色# 606266;
}。img-position-item.nums {
宽度：18px
高度：18px
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
颜色：# 606266;
字体大小：14px
}。img-位置-项目：悬停，img-position-item.active {
边框颜色：# d1d2d3
颜色：# d1d2d3
过渡：3s；
}。img-位置-项目。图像-位置-项目{
左边距：10px
}。左-btn，1000 .右-btn {
位置：绝对；
top:50%；
底部：0;
宽度：20px
高度：30px
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
光标：指针；
颜色：# d1d2d3
字体大小：20px
transform: translate(0，-50%)；
}。左-btn:悬停，右-btn:悬停{
颜色：# fff
过渡：3s；
}。左侧btn {
左：5px
}。右-btn {
右：5px
}
/风格
只是简单的实现了一个轮播图比较基础的部分，之前用原生写了一遍，现在用某视频剪辑软件写一遍作为一个组件，也还不错。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。