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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)