vue實(shí)現(xiàn)標(biāo)簽頁(yè)切換【詳細(xì)】

在vue中實(shí)現(xiàn)標(biāo)簽頁(yè)切換有如下2種方式：

①　使用動(dòng)態(tài)組件

②　使用路由

當(dāng)然你可以使用第三方ui來(lái)實(shí)現(xiàn)，比如Element Plus。不過(guò)自己試著實(shí)現(xiàn)一下會(huì)更好。

這里講一下第一和第二種方式，以組件實(shí)現(xiàn)為重點(diǎn)，那么就先講一下使用路由的方式。

使用路由實(shí)現(xiàn) Tab切換

首先，在router文件夾的index.js文件中，配置子頁(yè)面的路由

 {
      path: '/Profile',
      name: 'Profile',
      meta:{
        showHead:true,
        path:'個(gè)人中心'
      },
      component: () => import('../views/ProfileView.vue'),
      children:[
        {
          path:'article',
          name:'article',
          component: () => import('../components/Article.vue')
        },
        {
          path:'picture',
          name:'picture',
          component: () => import('../components/Picture.vue')
        }
      ]
    },

以防萬(wàn)一你不知道，path使用‘/xx’的是根路徑，使用’xxx‘會(huì)自動(dòng)拼接。

以 / 開(kāi)頭的嵌套路徑將被視為根路徑。這允許你利用組件嵌套，而不必使用嵌套的 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 動(dòng)態(tài)組件實(shí)現(xiàn) Tab切換

大概的思路是這樣的：首先，每一個(gè)ｔａｂ都有一個(gè)ｐａｎｅｌ。

其次，我們希望ｔａｂ和他的ｐａｎｅｌ能夠關(guān)聯(lián)起來(lái)，那么他們之間最好有什么相同的特征，所以我們就想到了ｉｄ。我們可以給每組的男嘉賓和女嘉賓都用上相同的編號(hào)，這樣我們只需要看編號(hào)就知道誰(shuí)對(duì)應(yīng)誰(shuí)啦！

最后，大家都知道，約會(huì)是一對(duì)一的。因此，我們男一(mtab-1)和女一(panel-1)約會(huì)的時(shí)候，其他的女嘉賓是不能出場(chǎng)的。

控制組件的顯示隱藏可以用v-if/v-show。

用isShow來(lái)記錄當(dāng)前出場(chǎng)的男嘉賓(mtab)。

用數(shù)組panelShowList來(lái)記錄每位女嘉賓(panel)是否出場(chǎng)的。

大概的框架是這樣的：

<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是有初始值的。開(kāi)場(chǎng)男女嘉賓，安排！

data(){
    return{
      isShow:0,
      panelShowList:[1,0,0]
    }
  }

差點(diǎn)忘了要給出場(chǎng)男嘉賓一個(gè)特寫(xiě)，給被選中的ｔａｂ增加一些醒目的樣式。

        <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存儲(chǔ)了女嘉賓們的出場(chǎng)狀態(tài)，數(shù)組下標(biāo)為男女嘉賓相同的編號(hào)。

接著，我們開(kāi)始思考怎么樣才能讓ｔａｂ和ｐａｎｅｌ這兩邊的嘉賓能夠成雙成對(duì)的出現(xiàn)呢？
答：那當(dāng)然得讓他們相互牽手成功！

前面我們已經(jīng)在雙方的ｉｄ上做好了手腳，那么現(xiàn)在就簡(jiǎn)單了。

首先，獲取男方的ｉｄ，不對(duì)，是tab的id。

 clickTab(e){
      console.log('我的編號(hào)是',e.srcElement.id.charAt(5)) 
      this.isShow = e.srcElement.id.charAt(5)

接著我們需要主持人來(lái)呼喚女嘉賓出場(chǎng)，不是。是利用watch偵聽(tīng)器對(duì)isShow屬性的監(jiān)聽(tīng)。只要isShow改變就代表當(dāng)前出場(chǎng)的男嘉賓改變了，因此立馬通知前一位女嘉賓退場(chǎng)，對(duì)應(yīng)的女嘉賓出場(chǎng)。

watch:{
    isShow(newValue,oldValue){
      this.panelShowList[oldValue]=0
      this.panelShowList[newValue]=1
    }
  }

這里我們擴(kuò)展一個(gè)知識(shí)點(diǎn)，那就是watch的深層監(jiān)聽(tīng)。

watch 默認(rèn)是淺層的：被偵聽(tīng)的屬性，僅在被賦新值時(shí)，才會(huì)觸發(fā)回調(diào)函數(shù)——而嵌套屬性的變化不會(huì)觸發(fā)。如果想偵聽(tīng)所有嵌套的變更，你需要深層偵聽(tīng)器：

ok，到了這里，我們就成功實(shí)現(xiàn)了標(biāo)簽頁(yè)切換功能。

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)標(biāo)簽頁(yè)切換/制作tab組件的文章就介紹到這了,更多相關(guān)vue標(biāo)簽頁(yè)切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論