vue實現(xiàn)tab欄切換效果
本文實例為大家分享了vue實現(xiàn)tab欄切換效果的具體代碼,供大家參考,具體內(nèi)容如下
一個簡單的tab欄切換組件,由tabs以及tab-pane組成
效果圖
使用
<template> ? <div class="container"> ? ? <tabs ? ? ? default-active="2" ? ? ? class="build-tabs" ? ? > ? ? ? <tab-pane ? ? ? ? label="tab欄標題1" ? ? ? ? index="1" ? ? ? >tab欄內(nèi)容1</tab-pane> ? ? ? <tab-pane ? ? ? ? label="tab欄標題tab欄標題2" ? ? ? ? index="2" ? ? ? > ? ? ? ? tab欄內(nèi)容2 ? ? ? </tab-pane> ? ? ? <tab-pane ? ? ? ? label="tab欄標題" ? ? ? ? index="3" ? ? ? >tab欄內(nèi)容3</tab-pane> ? ? ? <tab-pane ? ? ? ? label="標題" ? ? ? ? index="4" ? ? ? >tab欄內(nèi)容4</tab-pane> ? ? ? <tab-pane ? ? ? ? label="tab欄標題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;?? ?// 側邊欄時,使側欄高度與內(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue keep-alive實現(xiàn)多組件嵌套中個別組件存活不銷毀的操作
這篇文章主要介紹了vue keep-alive實現(xiàn)多組件嵌套中個別組件存活不銷毀的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue2項目使用element-ui的el-tabs組件導致瀏覽器崩潰卡死問題
這篇文章主要介紹了vue2項目使用element-ui的el-tabs組件導致瀏覽器崩潰卡死問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue 中 elment-ui table合并上下兩行相同數(shù)據(jù)單元格
這篇文章主要介紹了vue 中 elment-ui table合并上下兩行相同數(shù)據(jù)單元格,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12vue parseHTML函數(shù)源碼解析 AST預備知識
這篇文章主要為大家介紹了vue parseHTML函數(shù)源碼解析 AST預備知識示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07Element DateTimePicker日期時間選擇器的使用示例
這篇文章主要介紹了Element DateTimePicker日期時間選擇器的使用示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標簽頁切換效果(vue-cli)
本篇文章主要介紹了詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標簽頁切換效果(vue-cli),具有一定的參考價值,有需要的可以了解下2017-08-08