vue实现tab栏切换效果

本文实例为大家分享了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;
? ? ? /* padding-bottom: 20px; */
? ? ? cursor: pointer;
? ? ? white-space: nowrap;
? ? }
? ? .active {
? ? ? // color: var(--color);
? ? ? color: #409EFF;
? ? ? /* padding-bottom: 15px; // 修正边框值：20px - 5px = 15px */
? ? ? 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于vue实现tab栏切换效果的详细内容...