类似于浏览器窗口一样的路由切换逻辑,看着还是挺高大上的,本以为有很多高级的玩意儿,奈何复杂的东西总是由简单的东西拼接而成的,这个功能也不例外。
本篇文章主要描述两个问题:
如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画。
该功能的开发主要使用到 AntDesignVue
组件库的Tab组件和 Animate.css
效果如下:
Tab标签页实现
首先是该组件的模板部分, ContextMenu
组件是我们自定义的右键菜单,后面会说到。 a-tabs
组件则是 ant
的组件,具体用法不详述,可以查看官方文档。还有一个 PageToggleTransition
组件,是我们用来实现动画切换的组件,非常简单。
/** * TabLayout.vue 的模板部分,简单看一下有个印象 */ <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>
原理
维护一个 pageList
,通过监听路由变化动态的添加和删除page。而所谓的page,就是页面的路由对象($route),我们正是通过 $route.fullPath
作为页面的唯一标识的。而删除页面时不光要操作 pageList
,还要利用 keep-alive
组件的 exclude
属性删除缓存。至于 a-tabs
组件的这个插槽,主要是为了绑定一个数据key,以便触发contextmenu事件时,可以更容易的获取到对应页面的key值(fullPath)
理论存在,实践开始。
路由监听
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 } }
路由变化时,主要做三件事:
- 设置当前页(activePage)
- 将当前页加入缓存,即移出垃圾桶(dustbin)
- 如果当前页不在pageList中,则添加进来。
页面跳转
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) // 重置,否则会影响到某些组件的缓存 }) } } ... ... }
这里主要主要说一下remove方法:
- 如果是最后一页,则忽略
- 在pageList中找到当前页对应的组件名用于删除缓存(这里不清楚的可以看一下 keep-alive组件 ,和 $route.matched )
- 如果删除的是当前页,需要进行页面跳转,向左挑还是向右跳呢?
需要强调的时 keep-alive
的 exclude
属性,当组件名被匹配到的时候就会立即清除缓存,所以, dustbin
添加完之后记得要重置,否则下次就不会缓存了。
自定义contextmenu事件
解释下,contextmenu事件就是右键菜单事件,我们可以通过监听事件,使得右键菜单事件触发的时候显示我们的自定义菜单。
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) }
另外要说的是,dom元素上以 data-
开头的属性会被收录进元素的 dataset
属性中, data-key
访问时就是 dom.dataset.key
下面就是我们的 ContextMenu
组件了:
效果图:
代码如下:
<template> <a-menu v-show="visible" class="contextmenu" :style="style" :selectedKeys="selectedKeys" @click="handleClick" > <a-menu-item v-for="item in list" :key="item.key"> <a-icon v-if="item.icon" :type="item.icon"/> <span>{{ item.text }}</span> </a-menu-item> </a-menu> </template> <script> export default { name: 'ContextMenu', props: { visible: { type: Boolean, required: false, default: false }, list: { type: Array, required: true, default: () => [] } }, data () { return { left: 0, top: 0, target: null, selectedKeys: [] } }, computed: { style () { return { left: this.left + 'px', top: this.top + 'px' } } }, created () { const clickHandler = () => this.closeMenu() const contextMenuHandler = e => this.setPosition(e) window.addEventListener('click', clickHandler) window.addEventListener('contextmenu', contextMenuHandler) this.$emit('hook:beforeDestroy', () => { window.removeEventListener('click', clickHandler) window.removeEventListener('contextmenu', contextMenuHandler) }) }, methods: { closeMenu () { this.$emit('update:visible', false) }, setPosition (e) { this.left = e.clientX this.top = e.clientY this.target = e.target }, handleClick ({ key }) { this.$emit('select', key, this.target) this.closeMenu() } } } </script> <style lang="stylus" scoped> .contextmenu position fixed z-index 1000 border-radius 4px border 1px lightgrey solid box-shadow 4px 4px 10px lightgrey !important .ant-menu-item margin 0 !important </style>
这里需要强调的是钩子函数 created
的内容:
1.首先全局事件需要成对出现,有添加就要有移除,否则可能造成内存泄漏,并导致一些其他的bug。就比如在模块热替换的项目中,会造成反复绑定的问题。
2.为什么这里要给window绑定contextmenu事件和click事件,之前不是绑过了吗?这里的click事件主要是为了关闭菜单,右键菜单的特点是,不论点了什么点了哪里,只要点一下就会关闭。这里的contextmenu事件主要是为了获取到事件对象 event
,以此来设置菜单的位置。而之前绑定在 a-tabs
组件上的contextmenu事件主要是为了阻止默认事件,我们只拦截了该组件,而不需要拦截全局范围。
自定义右键菜单主要是为了 从 event.target
中获取到我们需要的key并以事件的形式传递出来 ,便于分发后面的逻辑,即:
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为例:
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下一页阅读全文以上就是Vue如何实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页。遇到一件事,喜欢它就享受它;不喜欢就避开它;避不开就改变它,改不了就接受它;接收不下,就处理它;难以处理,就放下它。其实,人最难的,是放下。更多关于Vue如何实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页请关注haodaima.com其它相关文章!