Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫效果的代碼第2/3頁(yè)
緩存控制
這部分邏輯比較簡(jiǎn)單,結(jié)合注釋可以看懂
methods: { clearCache (route) { const componentName = last(route.matched).components.default.name // last方法來(lái)自lodash,獲取數(shù)組最后一個(gè)元素 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) // 從dustbin中刪除當(dāng)前組件名,恢復(fù)其緩存機(jī)制 } } }
這樣,主要邏輯就做完了,下面簡(jiǎn)單說(shuō)說(shuō)轉(zhuǎn)場(chǎng)動(dòng)畫的實(shí)現(xiàn)
轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn)
轉(zhuǎn)場(chǎng)動(dòng)畫主要是用到 Animate.css
配合Vue的 transition
組件實(shí)現(xiàn),組件完整代碼如下,極其簡(jiǎn)單:
<template> <transition :enter-active-class="`animate__animated animate__${name}`"> <slot /> </transition> </template> <script> export default { name: 'PageToggleTransition', props: { name: String } } </script>
具體參考官方文檔 關(guān)于transition組件的說(shuō)明
最后 借鑒自 vue-antd-admin github.com/1446445040/…
完整代碼
<template> <PageLayout> <ContextMenu :list="menuItems" :visible.sync="menuVisible" @select="onMenuSelect" /> <!-- 標(biāo)簽部分 --> <a-tabs type="editable-card" :hide-add="true" :active-key="activePage" @change="changePage" @edit="editPage" @contextmenu="onContextmenu" > <a-tab-pane v-for="page in pageList" :key="page.fullPath"> <template #tab> <span :data-key="page.fullPath"> {{ page.name }} </span> </template> </a-tab-pane> </a-tabs> <!-- 路由出口 --> <PageToggleTransition name="fadeIn"> <keep-alive :exclude="dustbin"> <router-view /> </keep-alive> </PageToggleTransition> </PageLayout> </template> <script> import { message } from 'ant-design-vue' import { last } from 'lodash' import PageLayout from './PageLayout' import ContextMenu from '../components/common/ContextMenu' import PageToggleTransition from '../components/transition/PageToggleTransition' export default { name: 'TabLayout', components: { PageToggleTransition, ContextMenu, PageLayout }, data () { return { pageList: [], dustbin: [], activePage: '', menuVisible: false, menuItems: [ { key: '1', icon: 'arrow-left', text: '關(guān)閉左側(cè)' }, { key: '2', icon: 'arrow-right', text: '關(guān)閉右側(cè)' }, { key: '3', icon: 'close', text: '關(guān)閉其它' } ] } }, watch: { $route: { handler (route) { this.activePage = route.fullPath this.putCache(route) const index = this.pageList.findIndex(item => item.fullPath === route.fullPath) if (index === -1) { this.pageList.push(route) } }, immediate: true } }, methods: { changePage (key) { this.activePage = key this.$router.push(key) }, editPage (key, action) { if (action === 'remove') { this.remove(key) } }, remove (key) { if (this.pageList.length <= 1) { return message.info('最后一頁(yè)了哦~') } let curIndex = this.pageList.findIndex(item => item.fullPath === key) const { matched } = this.pageList[curIndex] const componentName = last(matched).components.default.name this.dustbin.push(componentName) this.pageList.splice(curIndex, 1) // 如果刪除的是當(dāng)前頁(yè)才需要跳轉(zhuǎn) if (key === this.activePage) { // 判斷向左跳還是向右跳 curIndex = curIndex >= this.pageList.length ? this.pageList.length - 1 : curIndex const page = this.pageList[curIndex] this.$router.push(page.fullPath).finally(() => { this.dustbin.splice(0) // 重置,否則會(huì)影響到某些組件的緩存 }) } }, // 自定義右鍵菜單的關(guān)閉功能 onContextmenu (e) { const key = getTabKey(e.target) if (!key) return e.preventDefault() this.menuVisible = true }, onMenuSelect (key, target) { const tabKey = getTabKey(target) switch (key) { case '1': this.closeLeft(tabKey); break case '2': this.closeRight(tabKey); break case '3': this.closeOthers(tabKey); break default: break } }, closeOthers (tabKey) { const index = this.pageList.findIndex(item => item.fullPath === tabKey) for (const route of this.pageList) { if (route.fullPath !== tabKey) { this.clearCache(route) } } const page = this.pageList[index] this.pageList =
相關(guān)文章
詳解Jest結(jié)合Vue-test-utils使用的初步實(shí)踐
這篇文章主要介紹了詳解Jest結(jié)合Vue-test-utils使用的初步實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06uniapp開發(fā)打包多端應(yīng)用完整方法指南
這篇文章主要介紹了uniapp開發(fā)打包多端應(yīng)用完整流程指南,包括了uniapp打包小程序,uniapp打包安卓apk,uniapp打包IOS應(yīng)用,需要的朋友可以參考下2022-12-12vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue中跨域以及sessionId不一致問(wèn)題及解決
這篇文章主要介紹了vue中跨域以及sessionId不一致問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12