vue使用動態(tài)組件實現(xiàn)TAB切換效果完整實例

更新時間：2023年05月13日 10:21:12 作者：魷魚絲2號

在實際項目開發(fā)中,我們經(jīng)常會遇到選項卡切換,對于一個前端工程師來說,組件化/模塊化開發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關于vue使用動態(tài)組件實現(xiàn)TAB切換效果的相關資料,需要的朋友可以參考下

一、方法1：使用Vant組件庫的tab組件

Vant 2 - Mobile UI Components built on Vue

二、方法2：手動創(chuàng)建tab切換效果

1.在components文件夾下創(chuàng)建切換的.vue頁面、引入使用

import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
components: {
    one,
    two,
    three,
    four,
},

2.布局：上面放tab點擊的標簽，下面放組件呈現(xiàn)對應內容

// 然后使用v-for循環(huán)出來呈現(xiàn)
<template>
   <div id="app">
      <div class="top">
      <!-- 放置tab點擊標簽 -->
         <div class="crad"
         :class="{ highLight: whichIndex == index }"
         v-for="(item, index) in cardArr"
         :key="index"
         @click="whichIndex = index">
            {{ item.componentName }}
        </div>
      </div>
      <div class="bottom">
        <!-- 放置動態(tài)組件... -->
       <!-- keep-alive緩存組件，這樣的話，組件就不會被銷毀，DOM就不會被重新渲染，
       瀏覽器也就不會回流和重繪，就可以優(yōu)化性能。不使用的話頁面加載就會慢一點 -->
       <keep-alive>
         <component :is="componentId"></component>
       </keep-alive>
      </div>
   </div>
</template>

3.寫好上面的tab點擊標簽，定義數(shù)據(jù)修改樣式

// 首先我們在data中定義數(shù)組cardArr存放點擊tab的數(shù)據(jù)
data() {
   return {
      whichIndex: 0,
      cardArr: [
        {
          componentName: "動態(tài)組件一",
          componentId: "one",
        },{
          componentName: "動態(tài)組件二",
          componentId: "two",
        },{
          componentName: "動態(tài)組件三",
          componentId: "three",
        },{
          componentName: "動態(tài)組件四",
          componentId: "four",
        },
      ],
    };
},

// 又因為需要有高亮狀態(tài)樣式：默認索引0高亮
.highLight {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transform: translate3d(0, -1px, 0);
}

三、完整代碼

<template>
  <div id="app">
    <div class="top">
      <div
        class="crad"
        :class="{ highLight: whichIndex == index }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click="
          whichIndex = index;
          componentId = item.componentId;
        "
      >
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
export default {
  components: {
    one,
    two,
    three,
    four,
  },
  data() {
    return {
      whichIndex: 0,
      componentId: "one",
      cardArr: [
        {
          componentName: "動態(tài)組件一",
          componentId: "one",
        },
        {
          componentName: "動態(tài)組件二",
          componentId: "two",
        },
        {
          componentName: "動態(tài)組件三",
          componentId: "three",
        },
        {
          componentName: "動態(tài)組件四",
          componentId: "four",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    .crad {
      width: 20%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #e9e9e9;
    }
    .highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
    }
  }
  .bottom {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 100px);
    border: 3px solid pink;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

總結

到此這篇關于vue使用動態(tài)組件實現(xiàn)TAB切換效果的文章就介紹到這了,更多相關vue動態(tài)組件實現(xiàn)TAB切換內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

解決vue-element-admin安裝依賴npm install報錯問題
這篇文章主要介紹了解決vue-element-admin安裝依賴npm install報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
vue之el-upload使用FormData多文件同時上傳問題
這篇文章主要介紹了vue之el-upload使用FormData多文件同時上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue3?elementPlus?table實現(xiàn)列寬可拖拽功能
這篇文章主要介紹了vue3?elementPlus?table實現(xiàn)列寬可拖拽功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
Ant-design-vue Table組件customRow屬性的使用說明
這篇文章主要介紹了Ant-design-vue Table組件customRow屬性的使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue中數(shù)字相加為字串轉化為數(shù)值的例子
今天小編就為大家分享一篇vue中數(shù)字相加為字串轉化為數(shù)值的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue代理請求之Request?failed?with?status?code?404問題及解決
這篇文章主要介紹了vue代理請求之Request?failed?with?status?code?404問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
npm踩坑問題實戰(zhàn)記錄
這篇文章主要給大家介紹了關于npm踩坑問題的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
Vue 數(shù)據(jù)綁定的原理分析
這篇文章主要介紹了Vue 數(shù)據(jù)綁定的原理，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11
vue的自定義指令傳參方式
這篇文章主要介紹了vue的自定義指令傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05