Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第2/3页

methods: {
 clearCache (route) {
 const componentName = last(route.matched).components.default.name // last方法来自lodash，获取数组最后一个元素
 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中删除当前组件名，恢复其缓存机制
 }
 }
}

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

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

<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: '关闭左侧' },
 { key: '2', icon: 'arrow-right', text: '关闭右侧' },
 { 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)
 // 如果删除的是当前页才需要跳转
 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实现炫酷动画效果
Animate.css在vue中的使用方式