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

/**
 * TabLayout.vue 的模板部分，简单看一下有个印象
 */

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 &＃63; this.pageList.length - 1 : curIndex
 const page = this.pageList[curIndex]
 this.$router.push(page.fullPath).finally(() => {
  this.dustbin.splice(0) // 重置，否则会影响到某些组件的缓存
 })
 }
 }
 ...
 ...
}

methods: {
 // 自定义右键菜单的关闭功能
 onContextmenu (e) {
 const key = getTabKey(e.target) // 这里的判断，用到了前面在span标签上加的data-key自定义属性
 if (!key) return // 主要是为了控制菜单的显示或隐藏

 e.preventDefault() // 组织默认行为，显示我们的自定义邮件菜单
 this.menuVisible = true
 }
 ...
 ...
}
/**
 * 由于ant-design-vue组件库的TabPane组件暂不支持自定义监听器，无法直接获取到右键target所在标签页的key 。故增加此方法用于
 * 查询右键target所在标签页的标识 key ，以用于自定义右键菜单的事件处理。
 * 注：TabPane组件支持自定义监听器后可去除该方法并重构 ‘自定义右键菜单的事件处理'
 * @param target 查询开始目标
 * @param depth 查询层级深度 （查找层级最多不超过3层，超过3层深度直接返回 null）
 * @returns {String}
 */
function getTabKey (target, depth = 0) {
 if (depth > 2 || !target) {
 return null
 }
 return target.dataset.key || getTabKey(target.firstElementChild, ++depth)
}

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) // 找到触发事件时鼠标停留在那个tab上
 for (const route of this.pageList) {
 if (route.fullPath !== tabKey) {
  this.clearCache(route) // 清缓存
 }
 }
 const page = this.pageList[index]
 this.pageList = 
                            
123下一页阅读全文