vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果
問題描述
tab切換的場(chǎng)景在開發(fā)中會(huì)經(jīng)常用到。當(dāng)需要實(shí)現(xiàn)這種效果的時(shí)候,我們常常會(huì)想到下面的方式去實(shí)現(xiàn)這個(gè)效果。
- 方式一 使用display:none;去控制dom元素的顯示與隱藏。從而實(shí)現(xiàn),兩個(gè)tab的顯示與隱藏。不過如果有三四個(gè)tab要切換的話,這種方式就不可取了。
- 方式二 使用vue中的指令v-if或者v-show實(shí)現(xiàn)。這種方式可以實(shí)現(xiàn),不過代碼寫的不優(yōu)雅。試想一個(gè).vue文件中出現(xiàn)一大把v-if是什么樣的效果?而且使用v-if還得聲明很多的變量去做標(biāo)識(shí)。所以不是十分好的的解決方案
- 方式三 使用elementui或者iview中的tab切換組件 這種方式也還行,不過有的時(shí)候需要/deep/改樣式,就有點(diǎn)麻煩了。
筆者認(rèn)為,使用vue的動(dòng)態(tài)組件去實(shí)現(xiàn)tab的切換效果,會(huì)比較方便。
什么是vue的動(dòng)態(tài)組件
vue的動(dòng)態(tài)組件,本質(zhì)上還是一個(gè)組件,組件通俗來說就是一塊具有js邏輯的UI視圖層。所謂動(dòng)態(tài)組件就是我們可以根據(jù)一些條件去動(dòng)態(tài)控制頁面的某個(gè)地方具體顯示那個(gè)組件。這樣說就有點(diǎn)tab切換的味道了。
應(yīng)用場(chǎng)景描述
需求效果圖
其實(shí)很簡單,就是一個(gè)tab切換的效果,當(dāng)然實(shí)際開發(fā)中,tab的樣式效果可能會(huì)稍微復(fù)雜點(diǎn)。
實(shí)現(xiàn)步驟
第一步(新建組件并引入注冊(cè))
首先在components文件夾下定義四個(gè).vue文件,作為tab切換呈現(xiàn)的內(nèi)容部分,引入既可使用。
新建
引入并注冊(cè)
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, },
第二步(布局,上面放tab點(diǎn)擊的標(biāo)簽,下面放組件呈現(xiàn)對(duì)應(yīng)內(nèi)容)
<template> <div id="app"> <div class="top"> <!-- 放置tab點(diǎn)擊標(biāo)簽 --> </div> <div class="bottom"> <!-- 放置動(dòng)態(tài)組件呈現(xiàn)對(duì)應(yīng)內(nèi)容 --> </div> </div> </template>
第三步(寫好上面的tab點(diǎn)擊標(biāo)簽)
// 首先我們?cè)赿ata中定義數(shù)組cardArr存放點(diǎn)擊tab的數(shù)據(jù) data() { return { whichIndex: 0, cardArr: [ { componentName: "動(dòng)態(tài)組件一", }, { componentName: "動(dòng)態(tài)組件二", }, { componentName: "動(dòng)態(tài)組件三", }, { componentName: "動(dòng)態(tài)組件四", }, ], }; }, // 然后使用v-for循環(huán)出來呈現(xiàn) <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" > {{ item.componentName }} </div> </div> <div class="bottom"> <!-- 放置動(dòng)態(tài)組件... --> </div> </div> </template> // 又因?yàn)樾枰懈吡翣顟B(tài),所以初始我們就默認(rèn)讓索引為0的也就是第一個(gè)高亮,使用data中定義的whichIndex和:class實(shí)現(xiàn) // 高亮樣式 .highLight { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); transform: translate3d(0, -1px, 0); }
第四步(使用動(dòng)態(tài)組件標(biāo)簽 <component/> )
// 動(dòng)態(tài)組件標(biāo)簽<component/>有一個(gè)is屬性,is的值為誰,就可以渲染誰, // 這里我們先用一個(gè)變量componentId存起來,componentId為誰,就呈現(xiàn)誰 <div class="bottom"> <component :is="componentId"></component> </div> // 我們默認(rèn)就讓第一個(gè)第一個(gè)呈現(xiàn)吧,同時(shí)需要讓cardList中的組件名和組件id對(duì)應(yīng)上, // 所以data中應(yīng)該修改成這樣 data() { return { whichIndex: 0, componentId: "one", // 值就是我們?cè)赾omponents對(duì)象中注冊(cè)的引入的組件的名字 cardArr: [ { componentName: "動(dòng)態(tài)組件一", componentId: "one", // 要與之對(duì)應(yīng) }, { componentName: "動(dòng)態(tài)組件二", componentId: "two", // 要與之對(duì)應(yīng) }, { componentName: "動(dòng)態(tài)組件三", componentId: "three", // 要與之對(duì)應(yīng) }, { componentName: "動(dòng)態(tài)組件四", componentId: "four", // 要與之對(duì)應(yīng) }, ], }; },
第五步(點(diǎn)擊某個(gè)tab組件,就動(dòng)態(tài)更改對(duì)應(yīng)componentId值即可)
<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; " > <!-- @click在標(biāo)簽中可以寫多個(gè)操作代碼,以分號(hào)隔開即可 --> {{ item.componentName }} </div> </div> <div class="bottom"> <!-- keep-alive緩存組件,這樣的話,組件就不會(huì)被銷毀,DOM就不會(huì)被重新渲染, 瀏覽器也就不會(huì)回流和重繪,就可以優(yōu)化性能。不使用的話頁面加載就會(huì)慢一點(diǎn) --> <keep-alive> <component :is="componentId"></component> </keep-alive> </div> </div> </template>
完整代碼附上
<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: "動(dòng)態(tài)組件一", componentId: "one", }, { componentName: "動(dòng)態(tài)組件二", componentId: "two", }, { componentName: "動(dòng)態(tài)組件三", componentId: "three", }, { componentName: "動(dòng)態(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使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的詳細(xì)內(nèi)容,更多關(guān)于vue 動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
這篇文章主要介紹了vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue使用nprogress實(shí)現(xiàn)進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue使用nprogress實(shí)現(xiàn)進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例
這篇文章主要給大家介紹了關(guān)于elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07ant-design-vue前端UI庫,如何解決Table中時(shí)間格式化問題
這篇文章主要介紹了ant-design-vue前端UI庫,如何解決Table中時(shí)間格式化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03詳解vue項(xiàng)目構(gòu)建與實(shí)戰(zhàn)
這篇文章主要介紹了詳解vue項(xiàng)目構(gòu)建與實(shí)戰(zhàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06vue實(shí)現(xiàn)全屏滾動(dòng)效果(非fullpage.js)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全屏滾動(dòng)效果,非fullpage.js,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03