<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>