vue 左右滑动列表插件,vue点击按钮切换组件
这篇文章主要为大家详细介绍了基于某视频剪辑软件可左右滑动按钮组组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了基于某视频剪辑软件可左右滑动按钮组组件，供大家参考，具体内容如下
左右两箭头控制按钮组左右移动，双击到最左或最右边，功能比较简单。如下所示
模板
div class= demoButtons
div class=buttonF
el-row style=height:30px
El-col class= lableI I class= El-icon-arrow-left @ click= move buttons( left ) @ dblclick= moveSide( left )//El-col
El-col ref= button body class= button body
El-row id= button row ref= button row
El-tag:style= { width :button width px } v-for=(item，index)in buttonData :key= index :type= index==click index？: info @click=resetData(index，item)
El-tooltip v-if= item。命名项目。姓名。length parse int(button width/12)-1 placement= top :content= item。name effect= light
span { {重置名称(项目。name)} }/span
/El-工具提示
span v-else{{ item.name }}/span
/el-tag
/el-row
/el-col
El-col class= lableI I class= El-icon-arrow-right @ click= move buttons( right ) @ dblclick= moveSide( right )//El-col
/el-row
/div
/div
/模板
脚本
从" jquery "中导入$
导出默认值{
道具：{
按钮数据：{
类型：数组，
默认值：()={
return []
}
},
按钮宽度：{
类型：数量，
默认值：62
}
},
data () {
返回{
clickIndex: 0，
当前网站：0,
显示计数：0,
clickTimer: null，
}
},
观察：{},
已创建(){
//this.setButtons()
},
已安装(){
这个. nextTick(()={
this.showCount=parseInt(this .$参考文献。按钮体。$ El。客户端宽度/this。按钮宽度)//一行能展示几个按钮
})
},
方法：{
//设置名字
resetName (val) {
设I=parse int(this。按钮宽度/12)-1；
if (val val.length i) {
返回val.slice(0，I)
}否则{
返回值
}
},
//单击移一格
移动按钮(瓦尔){
if (this.clickTimer) {
窗户。清除超时(这。点击计时器)
this.clickTimer=null
}
这个。单击计时器=窗口。settimeout(()={
这个. nextTick(()={
if (val==left) {
if (this.currentSite 0) {
这个。当前站点=此。当前网站。按钮宽度
}
}否则{
常量总计数=this。按钮数据。长度//总共几个按钮
const show index=-parse int(this。当前站点/此。按钮宽度)//向左移了几个按钮
console.log(totalCount， totalLength ，this.showCount，showIndex)
如果(显示索引本。显示计数总计数){
这个。当前站点=此。当前站点-这个。按钮宽度
}
}
$(#buttonRow ).动画({左边距：this。当前网站 px })
})
}, 300)
},
//双击到边
moveSide (val) {
if (this.clickTimer) {
窗户。清除超时(这。点击计时器)
this.clickTimer=null
}
这个. nextTick(()={
if (val==left) {
this.currentSite=0
}否则{
常量总计数=this。按钮数据。长度//总共几个按钮
if (totalCount this.showCount) {
这个。当前站点=-((总计数-this。显示计数)*这个。按钮宽度)
}
}
$(#buttonRow ).动画({左边距：this。当前网站 px })
})
},
设置按钮(数据){
this.buttonData=data
},
重置数据(索引，数据){
this.clickIndex=index
这个. emit(resetData ，Data)
}
}
}
/脚本
样式lang=scss 范围。演示按钮{
宽度：100%;
身高：100%;
}。按钮F {
宽度：100%;
边距：0自动；
高度：30px
行高：30px
}。拉布雷{
高度：30px
行高：30px
宽度：20px
光标：指针；
}。按钮体{
溢出：隐藏；
高度：30px
行高：30px
宽度：calc(100%-40px)；
空白：nowrap
}。埃尔标签{
文本对齐：居中；
填充：0px 8px！重要；
高度：28px
行高：28px
光标：指针；
边框半径：0px！重要；
溢出：隐藏；
字体大小：12px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。