本文实例为大家分享了基于Vue可左右滑动按钮组组件，供大家参考，具体内容如下
左右两箭头控制按钮组左右移动，双击到最左或最右边，功能比较简单。如下所示
<template>
<div class="demoButtons">
<div class="buttonF">
<el-row style="height:30px ">
<el-col class="lableI"><i class="el-icon-arrow-left " @click="moveButtons('left')" @dblclick="moveSide('left')" /></el-col>
<el-col ref="buttonBody" class="buttonBody">
<el-row id="buttonRow" ref="buttonRow">
<el-tag :style="{'width':buttonWidth 'px'}" v-for="(item, index) in buttonData" :key="index" :type="index == clickIndex ? '' : 'info'" @click="resetData(index, item)">
<el-tooltip v-if="item.name && item.name.length > parseInt(buttonWidth/12) - 1" placement="top" :content="item.name" effect="light">
<span>{{ resetName(item.name) }}</span>
</el-tooltip>
<span v-else>{{ item.name }}</span>
</el-tag>
</el-row>
</el-col>
<el-col class="lableI"><i class="el-icon-arrow-right " @click="moveButtons('right')" @dblclick="moveSide('right')" /></el-col>
</el-row>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
props: {
buttonData: {
type: Array,
default: () => {
return []
}
},
buttonWidth: {
type: Number,
default: 62
}
},
data () {
return {
clickIndex: 0,
currentSite: 0,
showCount: 0,
clickTimer: null,
}
},
watch: {},
created () {
// this.setButtons()
},
mounted () {
this.$nextTick(() => {
this.showCount = parseInt(this.$refs.buttonBody.$el.clientWidth / this.buttonWidth) // 一行能展示几个按钮
})
},
methods: {
//设置名字
resetName (val) {
let i = parseInt(this.buttonWidth / 12) - 1;
if (val && val.length > i) {
return val.slice(0, i)
} else {
return val
}
},
// 单击移一格
moveButtons (val) {
if (this.clickTimer) {
window.clearTimeout(this.clickTimer)
this.clickTimer = null
}
this.clickTimer = window.setTimeout(() => {
this.$nextTick(() => {
if (val == 'left') {
if (this.currentSite < 0) {
this.currentSite = this.currentSite this.buttonWidth
}
} else {
const totalCount = this.buttonData.length // 总共几个按钮
const showIndex = -parseInt(this.currentSite / this.buttonWidth) // 向左移了几个按钮
console.log(totalCount, 'totalLength', this.showCount, showIndex)
if (showIndex this.showCount < totalCount) {
this.currentSite = this.currentSite - this.buttonWidth
}
}
$('#buttonRow').animate({ marginLeft: this.currentSite 'px' })
})
}, 300)
},
// 双击到边
moveSide (val) {
if (this.clickTimer) {
window.clearTimeout(this.clickTimer)
this.clickTimer = null
}
this.$nextTick(() => {
if (val == 'left') {
this.currentSite = 0
} else {
const totalCount = this.buttonData.length // 总共几个按钮
if (totalCount > this.showCount) {
this.currentSite = -((totalCount - this.showCount) * this.buttonWidth)
}
}
$('#buttonRow').animate({ marginLeft: this.currentSite 'px' })
})
},
setButtons (data) {
this.buttonData = data
},
resetData (index, data) {
this.clickIndex = index
this.$emit('resetData', data)
}
}
}
</script>
<style lang="scss" scoped>
.demoButtons {
width: 100%;
height: 100%;
}
.buttonF {
width: 100%;
margin: 0 auto;
height: 30px;
line-height: 30px;
}
.lableI {
height: 30px;
line-height: 30px;
width: 20px;
cursor: pointer;
}
.buttonBody {
overflow: hidden;
height: 30px;
line-height: 30px;
width: calc(100% - 40px);
white-space: nowrap;
}
.el-tag {
text-align: center;
padding: 0px 8px !important;
height: 28px;
line-height: 28px;
cursor: pointer;
border-radius: 0px !important;
overflow: hidden;
font-size: 12px;
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。