亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue?elementUi中的tabs標(biāo)簽頁使用教程

 更新時(shí)間:2023年03月23日 14:34:13   作者:顱骨鍋爐  
Tabs 組件提供了選項(xiàng)卡功能,默認(rèn)選中第一個(gè)標(biāo)簽頁,下面這篇文章主要給大家介紹了關(guān)于vue?elementUi中的tabs標(biāo)簽頁使用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

前言

詳細(xì)介紹如何添加Tabs標(biāo)簽頁,很簡(jiǎn)單的東西,但感覺教程很少,剛剛研究好久才弄好,記錄下希望對(duì)需要者有幫助。

一、整體頁面布局與完成效果

整體界面(mainview.vue)布局如下圖:

在紅色框部分添加標(biāo)簽頁

代碼結(jié)構(gòu)

標(biāo)簽頁主要在mainview中編寫

//mainview.vue
<template>
<el-container>
        <el-header>header頂部欄</el-header>
        <el-container>
            <el-aside>
            aside側(cè)邊欄
            <leftbar></leftbar>//leftbar.vue
            </el-aside>
            <el-main>main主界面
            		<el-tabs>標(biāo)簽頁
            			<el-tab-pane>
            				標(biāo)簽頁顯示區(qū)域
            			</el-tab-pane>
            		</el-tabs>
            </el-main>
        </el-container>
    </el-container>
 <template>

即在Main中添加Tabs標(biāo)簽頁,實(shí)現(xiàn)在側(cè)邊欄中點(diǎn)擊功能鍵后,在圖中紅色框部分出現(xiàn)標(biāo)簽,點(diǎn)擊可跳轉(zhuǎn)界面。

登陸默認(rèn)“首頁界面”開啟且不可關(guān)閉,其余界面可手動(dòng)開啟,手動(dòng)關(guān)閉。
完成效果如下圖:

二、代碼編寫

1.標(biāo)簽頁引入

標(biāo)簽頁代碼如下

	<el-tabs class="tabs" 
	         v-model="editableTabsValue" 
             type="border-card" 
             @tab-remove="removeTab"
             @tab-click="clickTab">
           <el-tab-pane class="tab-pane" 
           				v-for="item in editableTabs" 						      
           				:closable="item.close" 
                        :key="item.name" 
                        :label="item.title" 
                        :name="item.name" >
                         {{item.content}}
                        <RouterView></RouterView>//標(biāo)簽頁界面路由顯示
            </el-tab-pane>
     </el-tabs>

2.標(biāo)簽頁參數(shù)設(shè)置

2.1 標(biāo)簽頁主要參數(shù)

標(biāo)簽頁的數(shù)據(jù)存放在vuex的store中,在store.state中添加兩個(gè)參數(shù)的定義,設(shè)置的初始數(shù)據(jù)為“首頁界面”的數(shù)據(jù)。

state: {
    	//當(dāng)前打開的界面路由,初始值為主頁的路由
    editableTabsValue:'/mainview/index',
    //存放當(dāng)前打開的標(biāo)簽頁的數(shù)組,初始時(shí)只有首頁
    editableTabs:[{
      title:'首頁',//標(biāo)簽頁名
      name:'/mainview/index',//標(biāo)簽頁路由
      close:false//該標(biāo)簽頁是否可關(guān)閉,這里是首頁標(biāo)簽頁不可被關(guān)閉
    }]
  },

2.2 打開和切換標(biāo)簽頁方法

然后在mutation中添加兩個(gè)方法,操作這兩個(gè)參數(shù),以控制標(biāo)簽頁的打開和切換。

ADD_TABS:(state,tab)=>{//增加標(biāo)簽頁方法
	//在editableTabs中查找此界面是否已打開,否進(jìn)入if
   if(state.editableTabs.findIndex(e=>e.name===tab.path)===-1){
        state.editableTabs.push({//添加當(dāng)前標(biāo)簽頁進(jìn)入editableTabs
          title:tab.name,
          name:tab.path,
          close:true//使除了首頁標(biāo)簽頁外其他都可關(guān)閉
        })
      }
      state.editableTabsValue=tab.path//添加標(biāo)簽頁后默認(rèn)打開
},
CHANGE_TABS:(state,name)=>{//切換標(biāo)簽頁方法
		 //將需打開標(biāo)簽頁路由賦予editableTabsvalue
      state.editableTabsValue=name
},

2.3 mainview中添加數(shù)據(jù)

在mainview的data中添加并獲取state中的數(shù)據(jù),注意引入ref

2.4 側(cè)邊欄相關(guān)設(shè)置

在leftbar.vue的data中添加參數(shù)submenuList,用于存放側(cè)邊導(dǎo)航欄欄位數(shù)據(jù)。

此處代碼為elementUI導(dǎo)航欄代碼,不做過多解釋,注意添加opentab方法。

2.5 標(biāo)簽頁的打開

opentab方法,點(diǎn)擊側(cè)邊欄欄位以打開標(biāo)簽頁,調(diào)用ADD_TABS方法。

注意:1、導(dǎo)入store 2、此方法寫在leftbar.vue中,也就是說只有點(diǎn)擊側(cè)邊欄才能打開標(biāo)簽頁。

側(cè)邊欄效果如下圖:

3.標(biāo)簽頁的切換和關(guān)閉

3.1切換標(biāo)簽頁方法

前面已經(jīng)在store的mutation中寫過打開(ADD_TABS)和切換(CHANGE_TABS)兩個(gè)方法了,opentab寫在側(cè)邊欄(leftbar.vue)中,調(diào)用了打開方法(ADD_TABS)以實(shí)現(xiàn)點(diǎn)擊側(cè)邊欄打開標(biāo)簽頁。

調(diào)用切換(CHANGE_TABS)的方法則要寫在mainview中,如下圖。

在method中添加clickTab方法

clickTab(tab){
            var name=JSON.stringify(tab.paneName).replace('"','').replace('"','')//對(duì)tab參數(shù)處理,以獲得當(dāng)前點(diǎn)擊的標(biāo)簽頁的路由
            store.commit('CHANGE_TABS',name)//調(diào)用切換方法切換標(biāo)簽頁
            router.push(name)//路由跳轉(zhuǎn)以實(shí)現(xiàn)切換界面
    }

3.2 刷新方法

我們需要一個(gè)方法在更新完state中的參數(shù),同步更新mainview中的參數(shù)。

refreshTabs(){
        // console.log("refresh");
        this.editableTabsValue=store.state.editableTabsValue;
        this.editableTabs=store.state.editableTabs;
    },

代碼很簡(jiǎn)單,直接賦值就可以,重要的是需要在state數(shù)據(jù)更新時(shí),同步更新mainview中數(shù)據(jù),所以需要搞一個(gè)監(jiān)聽器,調(diào)用refreshTabs方法以實(shí)現(xiàn)同步更新數(shù)據(jù)。

3.3 監(jiān)聽以同步數(shù)據(jù)

在mainview的watch中,監(jiān)聽state,如有變化則同步更新數(shù)據(jù),這樣就實(shí)現(xiàn)了點(diǎn)擊標(biāo)簽頁后的實(shí)時(shí)切換。

watch:{
    "$store.state":{
            deep:true,
            handler:function(){
                this.refreshTabs();
            }
        },

3.4 標(biāo)簽頁的關(guān)閉

在mainview的method中添加removeTab方法,這里我直接復(fù)制了elementUI中的removeTab方法。
這個(gè)方法可以實(shí)現(xiàn),關(guān)閉一個(gè)標(biāo)簽頁后,會(huì)自動(dòng)打開旁邊的標(biāo)簽頁。

removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        store.state.editableTabsValue=activeName;
        store.state.editableTabs=tabs.filter(tab=>tab.name!==targetName);
        router.push(activeName)
    },

總結(jié)

到此這篇關(guān)于vue elementUi中tabs標(biāo)簽頁使用的文章就介紹到這了,更多相關(guān)elementUi中tabs標(biāo)簽頁使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論