From 0f7f73fd1a1a51ab4ffc8c289f79f2954a81a064 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=A6=E6=97=AD=E6=B4=8B?= <1446445040@qq.com> Date: Mon, 13 Jul 2020 17:54:15 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84TabView=E5=92=8CC?= =?UTF-8?q?ontextMenu=E7=9A=84=E9=83=A8=E5=88=86=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 提取并修改getPageKey函数，表意更明确 2. 修复ContextMenu点击失败的bug（菜单项之间有margin缝隙） 3. 其他个别代码格式（基于eslint）调整 --- src/components/menu/Contextmenu.vue | 37 ++++++++---- src/layouts/TabsView.vue | 89 +++++++++++++---------------- 2 files changed, 64 insertions(+), 62 deletions(-) diff --git a/src/components/menu/Contextmenu.vue b/src/components/menu/Contextmenu.vue index 13df92b..a93e332 100644 --- a/src/components/menu/Contextmenu.vue +++ b/src/components/menu/Contextmenu.vue @@ -1,7 +1,14 @@ @@ -38,23 +45,27 @@ export default { } }, created () { - window.addEventListener('mousedown', e => this.closeMenu(e)) - window.addEventListener('contextmenu', e => this.setPosition(e)) + 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 (e) { - if (['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) { - this.$emit('update:visible', false) - } + closeMenu () { + this.$emit('update:visible', false) }, setPosition (e) { this.left = e.clientX this.top = e.clientY this.target = e.target }, - handleClick ({key}) { + handleClick ({ key }) { this.$emit('select', key, this.target) - this.$emit('update:visible', false) + this.closeMenu() } } } @@ -63,9 +74,11 @@ export default { diff --git a/src/layouts/TabsView.vue b/src/layouts/TabsView.vue index 156ae16..1a5deec 100644 --- a/src/layouts/TabsView.vue +++ b/src/layouts/TabsView.vue @@ -2,14 +2,15 @@ + @edit="editPage" + @contextmenu="onContextmenu" + > {{page.name}} @@ -33,7 +34,7 @@ import {mapState, mapMutations} from 'vuex' export default { name: 'TabsView', - components: {PageToggleTransition, Contextmenu, AdminLayout}, + components: { PageToggleTransition, Contextmenu, AdminLayout }, data () { return { pageList: [], @@ -76,68 +77,43 @@ export default { this.$router.push(key) }, editPage (key, action) { - this[action](key) + this[action](key) // remove }, remove (key) { if (this.pageList.length === 1) { - this.$message.warning('这是最后一页，不能再关闭了啦') - return + return this.$message.warning('这是最后一页，不能再关闭了啦') } - let index = this.pageList.findIndex(item => item.fullPath == key) + let index = this.pageList.findIndex(item => item.fullPath === key) let pageRoute = this.pageList[index] this.clearCache(pageRoute) this.pageList = this.pageList.filter(item => item.fullPath !== key) - if (key == this.activePage) { + if (key === this.activePage) { index = index >= this.pageList.length ? this.pageList.length - 1 : index this.activePage = this.pageList[index].fullPath this.$router.push(this.activePage) } }, onContextmenu (e) { - const pageKey = this.getPageKey(e.target) - if (pageKey !== null) { + const pageKey = getPageKey(e.target) + if (pageKey) { e.preventDefault() this.menuVisible = true } }, - /** - * 由于ant-design-vue组件库的TabPane组件暂不支持自定义监听器，无法直接获取到右键target所在标签页的 pagekey 。故增加此方法用于 - * 查询右键target所在标签页的标识 pagekey ，以用于自定义右键菜单的事件处理。 - * 注：TabPane组件支持自定义监听器后可去除该方法并重构 ‘自定义右键菜单的事件处理’ - * @param target 查询开始目标 - * @param count 查询层级深度 （查找层级最多不超过3层，超过3层深度直接返回 null） - * @returns {String} - */ - getPageKey (target, depth) { - depth = depth || 0 - if (depth > 2) { - return null - } - let pageKey = target.getAttribute('pagekey') - pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null) - return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null) - }, onMenuSelect (key, target) { - let pageKey = this.getPageKey(target) + let pageKey = getPageKey(target) switch (key) { - case '1': - this.closeLeft(pageKey) - break - case '2': - this.closeRight(pageKey) - break - case '3': - this.closeOthers(pageKey) - break - default: - break + case '1': this.closeLeft(pageKey); break + case '2': this.closeRight(pageKey); break + case '3': this.closeOthers(pageKey); break + default: break } }, closeOthers (pageKey) { - const index = this.pageList.findIndex(item => item.fullPath == pageKey) + const index = this.pageList.findIndex(item => item.fullPath === pageKey) // 要关闭的页面清除缓存 this.pageList.forEach(item => { - if (item.fullPath != pageKey){ + if (item.fullPath !== pageKey){ this.clearCache(item) } }) @@ -146,7 +122,7 @@ export default { this.$router.push(this.activePage) }, closeLeft (pageKey) { - const index = this.pageList.findIndex(item => item.fullPath == pageKey) + const index = this.pageList.findIndex(item => item.fullPath === pageKey) // 清除缓存 this.pageList.forEach((item, i) => { if (i < index) { @@ -154,13 +130,13 @@ export default { } }) this.pageList = this.pageList.slice(index) - if (this.pageList.findIndex(item => item.fullPath == this.activePage) == -1) { + if (this.pageList.findIndex(item => item.fullPath === this.activePage) === -1) { this.activePage = this.pageList[0].fullPath this.$router.push(this.activePage) } }, closeRight (pageKey) { - const index = this.pageList.findIndex(item => item.fullPath == pageKey) + const index = this.pageList.findIndex(item => item.fullPath === pageKey) // 清除缓存 this.pageList.forEach((item, i) => { if (i > index) { @@ -168,27 +144,40 @@ export default { } }) this.pageList = this.pageList.slice(0, index + 1) - if (this.pageList.findIndex(item => item.fullPath == this.activePage) == -1) { + if (this.pageList.findIndex(item => item.fullPath === this.activePage) === -1) { this.activePage = this.pageList[this.pageList.length - 1].fullPath this.$router.push(this.activePage) } }, clearCache(route) { const componentName = route.matched.slice(-1)[0].components.default.name - if (this.dustbins.findIndex(item => item == componentName) == -1) { + if (this.dustbins.findIndex(item => item === componentName) === -1) { this.setDustbins(this.dustbins.concat(componentName)) } }, putCache(route) { const componentName = route.matched.slice(-1)[0].components.default.name - if (this.dustbins.findIndex(item => item == componentName) != -1) { - this.setDustbins(this.dustbins.filter(item => item != componentName)) + if (this.dustbins.includes(componentName)) { + this.setDustbins(this.dustbins.filter(item => item !== componentName)) } - }, ...mapMutations('setting', ['setDustbins']) } } +/** + * 由于ant-design-vue组件库的TabPane组件暂不支持自定义监听器，无法直接获取到右键target所在标签页的 pagekey 。故增加此方法用于 + * 查询右键target所在标签页的标识 pagekey ，以用于自定义右键菜单的事件处理。 + * 注：TabPane组件支持自定义监听器后可去除该方法并重构 ‘自定义右键菜单的事件处理’ + * @param target 查询开始目标 + * @param depth 查询层级深度 （查找层级最多不超过3层，超过3层深度直接返回 null） + * @returns {String} + */ +function getPageKey (target, depth = 0) { + if (depth > 2 || !target) { + return null + } + return target.getAttribute('pagekey') || getPageKey(target.firstElementChild, ++depth) +}