vue實現(xiàn)標簽頁切換/制作tab組件詳細教程
vue實現(xiàn)標簽頁切換【詳細】
在vue中實現(xiàn)標簽頁切換有如下2種方式：
① 使用動態(tài)組件
② 使用路由
當然你可以使用第三方ui來實現(xiàn)，比如Element Plus。不過自己試著實現(xiàn)一下會更好。
這里講一下第一和第二種方式，以組件實現(xiàn)為重點，那么就先講一下使用路由的方式。
使用路由實現(xiàn) Tab切換
首先，在router文件夾的index.js文件中，配置子頁面的路由
{
path: '/Profile',
name: 'Profile',
meta:{
showHead:true,
path:'個人中心'
},
component: () => import('../views/ProfileView.vue'),
children:[
{
path:'article',
name:'article',
component: () => import('../components/Article.vue')
},
{
path:'picture',
name:'picture',
component: () => import('../components/Picture.vue')
}
]
},
以防萬一你不知道，path使用‘/xx’的是根路徑，使用’xxx‘會自動拼接。
以 / 開頭的嵌套路徑將被視為根路徑。這允許你利用組件嵌套，而不必使用嵌套的 URL。
接著放出我們的組合拳與
<div class="column">
<router-link to="/profile/article" name="article">文章</router-link>
<router-link to="/profile/picture" name="picture">圖片</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
使用 component 動態(tài)組件實現(xiàn) Tab切換
大概的思路是這樣的：首先，每一個ｔａｂ都有一個ｐａｎｅｌ。
其次，我們希望ｔａｂ和他的ｐａｎｅｌ能夠關(guān)聯(lián)起來，那么他們之間最好有什么相同的特征，所以我們就想到了ｉｄ。我們可以給每組的男嘉賓和女嘉賓都用上相同的編號，這樣我們只需要看編號就知道誰對應誰啦！
最后，大家都知道，約會是一對一的。因此，我們男一(mtab-1)和女一(panel-1)約會的時候，其他的女嘉賓是不能出場的。
控制組件的顯示隱藏可以用v-if/v-show。
用isShow來記錄當前出場的男嘉賓(mtab)。
用數(shù)組panelShowList來記錄每位女嘉賓(panel)是否出場的。
大概的框架是這樣的：
<div class="column">
<button class="mtab" id="mtab-0" @click="clickTab">0</button>
<button class="mtab" id="mtab-1" @click="clickTab">1</button>
<button class="mtab" id="mtab-2" @click="clickTab">文章</button>
</div>
<div class="content">
<div class="panel" id="panel-0" v-if="panelShowList[0]">
我是內(nèi)容
</div>
<div class="panel" id="panel-1" v-if="panelShowList[1]">
我是內(nèi)容1
</div>
<div class="panel" id="panel-2" v-if="panelShowList[2]">
我是內(nèi)容2
</div>
</div>
不要忘記isShow和panelShowList是有初始值的。開場男女嘉賓，安排！
data(){
return{
isShow:0,
panelShowList:[1,0,0]
}
}
差點忘了要給出場男嘉賓一個特寫，給被選中的ｔａｂ增加一些醒目的樣式。
<div class="column">
<button class="mtab" id="mtab-0" @click="clickTab" :class="{highlightTab:panelShowList[0]}">0</button>
<button class="mtab" id="mtab-1" @click="clickTab" :class="{highlightTab:panelShowList[1]}">1</button>
<button class="mtab" id="mtab-2" @click="clickTab" :class="{highlightTab:panelShowList[2]}">文章</button>
</div>ps: panelShowList存儲了女嘉賓們的出場狀態(tài)，數(shù)組下標為男女嘉賓相同的編號。
接著，我們開始思考怎么樣才能讓ｔａｂ和ｐａｎｅｌ這兩邊的嘉賓能夠成雙成對的出現(xiàn)呢？
答：那當然得讓他們相互牽手成功！
前面我們已經(jīng)在雙方的ｉｄ上做好了手腳，那么現(xiàn)在就簡單了。
首先，獲取男方的ｉｄ，不對，是tab的id。
clickTab(e){
console.log('我的編號是',e.srcElement.id.charAt(5))
this.isShow = e.srcElement.id.charAt(5)
接著我們需要主持人來呼喚女嘉賓出場，不是。是利用watch偵聽器對isShow屬性的監(jiān)聽。只要isShow改變就代表當前出場的男嘉賓改變了，因此立馬通知前一位女嘉賓退場，對應的女嘉賓出場。
watch:{
isShow(newValue,oldValue){
this.panelShowList[oldValue]=0
this.panelShowList[newValue]=1
}
}
這里我們擴展一個知識點，那就是watch的深層監(jiān)聽。
watch 默認是淺層的：被偵聽的屬性，僅在被賦新值時，才會觸發(fā)回調(diào)函數(shù)——而嵌套屬性的變化不會觸發(fā)。如果想偵聽所有嵌套的變更，你需要深層偵聽器：
ok，到了這里，我們就成功實現(xiàn)了標簽頁切換功能。
總結(jié)
到此這篇關(guān)于vue實現(xiàn)標簽頁切換/制作tab組件的文章就介紹到這了,更多相關(guān)vue標簽頁切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vuex模塊化用法?跨模塊調(diào)用的方式,具有很好的參考價值,希望對大家有所幫助,2023-10-10
Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于vue單文件中引用路徑處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue.js具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據(jù)實現(xiàn)雙向綁定，有興趣的可以了解一下2017-06-06
下面小編就為大家分享一篇完美解決axios在ie下的兼容性問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點
監(jiān)聽事件是我們在使用vue.js的時候經(jīng)常使用的一個功能，下面這篇文章主要介紹了Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點 的相關(guān)資料，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
今天小編就為大家分享一篇基于element-ui的rules中正則表達式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了解決vue頁面注入js修改input值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue template中slot-scope/scope的使用方法
今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了Vue實現(xiàn)半自動打字機特效,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12