本文实例为大家分享了基于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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。