Vue實現(xiàn)Tab標簽路由效果并用Animate.css做轉(zhuǎn)場動畫效果的代碼第2/3頁

更新時間：2020年07月16日 10:31:44 作者：情緒羊

這篇文章主要介紹了Vue實現(xiàn)Tab標簽路由效果，并用Animate.css做轉(zhuǎn)場動畫效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

// 設置pageList，這里清除其他，也就是保留自己 this.activePage = page.fullPath this.$router.push(this.activePage).catch(e => e) }

緩存控制

這部分邏輯比較簡單，結(jié)合注釋可以看懂

methods: {
 clearCache (route) {
 const componentName = last(route.matched).components.default.name // last方法來自lodash，獲取數(shù)組最后一個元素
 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中刪除當前組件名，恢復其緩存機制
 }
 }
}

這樣，主要邏輯就做完了，下面簡單說說轉(zhuǎn)場動畫的實現(xiàn)

轉(zhuǎn)場動畫實現(xiàn)

轉(zhuǎn)場動畫主要是用到 Animate.css 配合Vue的 transition 組件實現(xiàn)，組件完整代碼如下，極其簡單：

<template>
 <transition :enter-active-class="`animate__animated animate__${name}`">
 <slot />
 </transition>
</template>

<script>
export default {
 name: 'PageToggleTransition',
 props: {
 name: String
 }
}
</script>

具體參考官方文檔關于transition組件的說明

最后借鑒自 vue-antd-admin github.com/1446445040/…

完整代碼

<template>
 <PageLayout>
 <ContextMenu
 :list="menuItems"
 :visible.sync="menuVisible"
 @select="onMenuSelect"
 />
 <!-- 標簽部分 -->
 <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: '關閉左側(cè)' },
 { key: '2', icon: 'arrow-right', text: '關閉右側(cè)' },
 { key: '3', icon: 'close', text: '關閉其它' }
 ]
 }
 },
 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('最后一頁了哦~')
 }
 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)
 // 如果刪除的是當前頁才需要跳轉(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) // 重置，否則會影響到某些組件的緩存
 })
 }
 },
 // 自定義右鍵菜單的關閉功能
 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 = 
                            上一頁123下一頁閱讀全文
                            
                                您可能感興趣的文章:vue封裝Animate.css動畫庫的使用方式
Vue3?路由頁面切換動畫?animate.css效果
vue中使用Animate.css的教程詳解
vue中使用animate.css實現(xiàn)炫酷動畫效果
Animate.css在vue中的使用方式