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

{"3":"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 \/\/ \u5224\u65ad\u5f53\u524dactivePage\u662f\u5426\u5728\u5c06\u8981\u5220\u9664\u7684\u9875\u9762\u4e2d 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 \/\/ \u5224\u65ad\u5f53\u524dactivePage\u662f\u5426\u5728\u5c06\u8981\u5220\u9664\u7684\u9875\u9762\u4e2d const curActivePage = restPages.find(item => item.fullPath === this.activePage) if (!curActivePage) { this.activePage = last(restPages).fullPath this.$router.push(this.activePage).catch(e => e) } }, \/** * \u7f13\u5b58\u63a7\u5236 *\/ clearCache (route) { const componentName = last(route.matched).components.default.name this.dustbin.push(componentName) \/\/ \u6e05\u9664 }, putCache (route) { const componentName = last(route.matched).components.default.name if (this.dustbin.includes(componentName)) { this.dustbin = this.dustbin.filter(item => item !== componentName) } } }}\/** * \u83b7\u53d6Tab\u6807\u7b7e\u4e0bdom\u8282\u70b9\u4e2d\u81ea\u5b9a\u4e49\u7684\u6570\u636e\uff0c\u9012\u5f52\u5411\u4e0b\u67e5\u627e\u6700\u591a3\u5c42\uff08\u89c2\u5bdfTab\u7ec4\u4ef6\u6e32\u67d3\u540e\u7684DOM\u5f97\u51fa\uff09 * \u8be5\u65b9\u5f0f\u5c5e\u4e8ehack\u624b\u6bb5\uff0c\u4e0d\u5f97\u5df2\u4e3a\u4e4b * @param{HTMLElement} target event.target * @param depth \u6df1\u5ea6 *\/function getTabKey (target, depth = 0) { if (depth > 2 || !target) { return null } return target.dataset.key || getTabKey(target.firstElementChild, ++depth)}<\/script>"}