本文实例为大家分享了vue实现tab栏切换效果的具体代码,供大家参考,具体内容如下
一个简单的tab栏切换组件,由tabs以及tab-pane组成
效果图
使用
<template>
<div class="container">
<tabs
default-active="2"
class="build-tabs"
>
<tab-pane
label="tab栏1"
index="1"
>tab栏内容1</tab-pane>
<tab-pane
label="tab栏tab栏2"
index="2"
>
tab栏内容2
</tab-pane>
<tab-pane
label="tab栏"
index="3"
>tab栏内容3</tab-pane>
<tab-pane
label=""
index="4"
>tab栏内容4</tab-pane>
<tab-pane
label="tab栏3"
index="5"
>tab栏内容5</tab-pane>
</tabs>
</div>
</template>
tabs
<template>
<div
v-show="pans.length"
class="tabs"
>
<div class="tab-title">
<div
v-for="(item) in pans"
:key="item.id"
class="item"
:class="{ 'active': currentActive === item.index }"
@click="changeTab(item.index)"
>{{ item.label }}</div>
</div>
<div class="tab-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
mode: {
type: String,
default: "horizontal/vertical"
},
defaultActive: {
type: String | Number,
default: '1'
},
defaultColor: {
type: String,
default: '#409EFF'
}
},
data: () => {
return {
currentActive: '',
pans: []
}
},
computed: {
},
watch: {
defaultActive: {
handler (newVal) {
this.currentActive = newVal
},
immediate: true
}
},
mounted () {
},
methods: {
changeTab (val) {
this.currentActive = val
},
}
}
</script>
<style scoped lang="scss">
::root {
--color: "#409EFF";
}
.tabs {
.tab-title {
display: flex;
// align-items: flex-start;
align-items: stretch; // 侧边栏时,使侧栏高度与内容高度一致,按最高的显示
margin-bottom: 14px;
border-bottom: 1px solid #ccc;
.item {
padding: 20px;
cursor: pointer;
white-space: nowrap;
}
.active {
// color: var(--color);
color: #409EFF;
border-bottom: 5px solid #409EFF;
background-image: linear-gradient(
to top,
rgba($color: #409EFF, $alpha: 0.2),
transparent
);
}
}
}
</style>
tab-pane
<template>
<div
v-show="show && renderPan"
class="tab-pane"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'tabPane',
props: {
index: {
type: [String, Number],
default: ''
},
label: {
type: String,
required: true
}
},
data: () => {
return {
renderPan: false
}
},
computed: {
show () {
if (this.$parent.currentActive === this.index) return true
return false
}
},
mounted () {
this.$parent.pans.push({ id: Date.parse(new Date()) + Math.random(), index: this.index, label: this.label });
this.renderPan = true
},
methods: {
},
}
</script>
<style scoped lang="scss">
</style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。