Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫效果的代碼
更新時(shí)間：2020年07月16日 10:31:44 作者：情緒羊
這篇文章主要介紹了Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果，并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
this.activePage = page.fullPath this.$router.push(this.activePage).catch(e => e) }, closeLeft (tabKey) { const index = this.pageList.findIndex(item => item.fullPath === tabKey) this.pageList.forEach((route, i) => { if (i < index) { this.clearCache(route) } }) const restPages = this.pageList.slice(index) this.pageList = restPages // 判斷當(dāng)前activePage是否在將要?jiǎng)h除的頁(yè)面中 const curActivePage = restPages.find(item => item.fullPath === this.activePage) if (!curActivePage) { this.activePage = restPages[0].fullPath this.$router.push(this.activePage).catch(e => e) } }, closeRight (tabKey) { const index = this.pageList.findIndex(item => item.fullPath === tabKey) this.pageList.forEach((route, i) => { if (i > index) { this.clearCache(route) } }) const restPages = this.pageList.slice(0, index + 1) this.pageList = restPages // 判斷當(dāng)前activePage是否在將要?jiǎng)h除的頁(yè)面中 const curActivePage = restPages.find(item => item.fullPath === this.activePage) if (!curActivePage) { this.activePage = last(restPages).fullPath this.$router.push(this.activePage).catch(e => e) } }, /** * 緩存控制 */ clearCache (route) { const componentName = last(route.matched).components.default.name this.dustbin.push(componentName) // 清除 }, putCache (route) { const componentName = last(route.matched).components.default.name if (this.dustbin.includes(componentName)) { this.dustbin = this.dustbin.filter(item => item !== componentName) } } }}/** * 獲取Tab標(biāo)簽下dom節(jié)點(diǎn)中自定義的數(shù)據(jù)，遞歸向下查找最多3層（觀察Tab組件渲染后的DOM得出） * 該方式屬于hack手段，不得已為之 * @param{HTMLElement} target event.target * @param depth 深度 */function getTabKey (target, depth = 0) { if (depth > 2 || !target) { return null } return target.dataset.key || getTabKey(target.firstElementChild, ++depth)}</script>
總結(jié)
到此這篇關(guān)于Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果，并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫的文章就介紹到這了,更多相關(guān)Vue實(shí)現(xiàn)Tab標(biāo)簽路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
