79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
Vue.component("more-btn", {
|
|
template: `
|
|
<div class="header-btn-max" @mouseleave="mouseleaveBtn">
|
|
<div :class="nav != ''?'more-btn active':'more-btn'" @mouseenter="mouseenterBtn">
|
|
{{text}}
|
|
<i class="el-icon-caret-bottom"></i>
|
|
</div>
|
|
<div class="header-btn-list" v-show="show" style="display: none">
|
|
<div class="header-btn-list-arrow"></i></div>
|
|
<div class="header-btn-list-item" :style="{width:widths+'px'}">
|
|
<div class="header-btn-list-padding">
|
|
<button type="button" style="width: 130px" :class="btnNav==i?'active':''" v-for="(item,i) in list"
|
|
@click="buttonClick(i,item)">{{item.text}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: {
|
|
label: {
|
|
type: String
|
|
},
|
|
nav: {
|
|
type: String
|
|
},
|
|
list: {
|
|
type: Array
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
widths: 0,
|
|
btnNav: -1,
|
|
chooseMenu: {},
|
|
text:''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.text = this.label
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.width()
|
|
},
|
|
width() {
|
|
if (this.list) {
|
|
if (this.list.length > 4) {
|
|
this.widths = 616
|
|
} else {
|
|
this.widths = this.list.length * 150 + 16
|
|
}
|
|
}
|
|
},
|
|
buttonClick(i, item) {
|
|
this.btnNav = i
|
|
this.text = item.text
|
|
this.$emit('value',item);
|
|
},
|
|
mouseenterBtn() {
|
|
this.show = true
|
|
},
|
|
mouseleaveBtn() {
|
|
this.show = false
|
|
}
|
|
},
|
|
watch: {
|
|
nav:function (n,o) {
|
|
this.nav=n
|
|
if(n == ''){
|
|
this.btnNav = -1
|
|
}
|
|
|
|
}
|
|
},
|
|
|
|
})
|