<template>
<div class="tab-wrapper" :id="'tab_' + tabType">
<!-- <span class="active-bar" :style="{'top': `${activeIndex * 30}px`}"></span> -->
<span class="active-bar" :style="{'top': `${currentIdx * 30}px`}" v-if="tabType == 'horizontal'"></span>
<span class="active-bar" :style="{'left': `${currentIdx * 150}px`}" v-if="tabType == 'vertical'"></span>
<ul>
<li v-for="(v, idx) in list" :key="v.id" @click="tabClick(v, idx)" @mouseenter="tabmouseEn(v, idx)" @mouseleave="tabmouseLe(v, idx)">{{v.name}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
activeIndex: 0,
currentIdx: 0,
list: [
{
id: 1,
name: 'label1'
},
{
id: 2,
name: 'label2'
},
{
id: 3,
name: 'label3'
},
{
id: 4,
name: 'label4'
}
]
}
},
props: {
tabList: {
type: Array,
default: () => []
},
tabType: {
type: String,
default: 'vertical'
}
},
methods: {
tabClick (v, idx) {
this.activeIndex = idx;
this.$emit('click', v, idx);
},
tabmouseLe (v, idx) {
console.log(v, idx);
this.currentIdx = this.activeIndex;
},
tabmouseEn (v, idx) {
console.log(v, idx);
this.currentIdx = idx;
}
}
};
</script>
<style lang="scss" scoped>
#tab_vertical {
width: 100%;
.active-bar {
position: absolute;
top: 28px;
left:0;
height: 2px;
width: 150px;
}
ul {
display: flex;
li {
width: 150px;
}
}
}
.tab-wrapper {
position:relative;
width:150px;
.active-bar {
position: absolute;
top: 0;
right:0;
height:30px;
width: 2px;
background:blue;
transition: all .3s;
}
ul {
li {
height: 30px;
width:150px;
background:#ccc;
line-height: 30px;
text-align: center;
cursor: pointer;
}
}
}
</style>
vue封装tab组件
于 2020-12-15 11:20:56 首次发布