vue實(shí)現(xiàn)tab欄切換效果

更新時間：2022年09月01日 10:07:40 作者：凡小多

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)tab欄切換效果的具體代碼，供大家參考，具體內(nèi)容如下

一個簡單的tab欄切換組件，由tabs以及tab-pane組成

效果圖

使用

<template>
? <div class="container">
? ? <tabs
? ? ? default-active="2"
? ? ? class="build-tabs"
? ? >
? ? ? <tab-pane
? ? ? ? label="tab欄標(biāo)題1"
? ? ? ? index="1"
? ? ? >tab欄內(nèi)容1</tab-pane>
? ? ? <tab-pane
? ? ? ? label="tab欄標(biāo)題tab欄標(biāo)題2"
? ? ? ? index="2"
? ? ? >
? ? ? ? tab欄內(nèi)容2
? ? ? </tab-pane>
? ? ? <tab-pane
? ? ? ? label="tab欄標(biāo)題"
? ? ? ? index="3"
? ? ? >tab欄內(nèi)容3</tab-pane>
? ? ? <tab-pane
? ? ? ? label="標(biāo)題"
? ? ? ? index="4"
? ? ? >tab欄內(nèi)容4</tab-pane>
? ? ? <tab-pane
? ? ? ? label="tab欄標(biāo)題3"
? ? ? ? index="5"
? ? ? >tab欄內(nèi)容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;?? ?// 側(cè)邊欄時，使側(cè)欄高度與內(nèi)容高度一致，按最高的顯示
? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: