refactor: 重构TabView和ContextMenu的部分逻辑

1. 提取并修改getPageKey函数，表意更明确 2. 修复ContextMenu点击失败的bug（菜单项之间有margin缝隙） 3. 其他个别代码格式（基于eslint）调整
4 years ago · 0f7f73fd1a
parent 255f68709e
commit 0f7f73fd1a
2 changed files with 64 additions and 62 deletions
--- a/src/components/menu/Contextmenu.vue
+++ b/src/components/menu/Contextmenu.vue
@ -1,7 +1,14 @@
 <template>
-  <a-menu :style="style" class="contextmenu" v-show="visible" @click="handleClick" :selectedKeys="selectedKeys">
+  <a-menu
+    v-show="visible"
+    class="contextmenu"
+    :style="style"
+    :selectedKeys="selectedKeys"
+    @click="handleClick"
+  >
    <a-menu-item :key="item.key" v-for="item in itemList">
-      <a-icon role="menuitemicon" v-if="item.icon" :type="item.icon" />{{item.text}}
+      <a-icon v-if="item.icon" :type="item.icon" />
+      <span>{{ item.text }}</span>
    </a-menu-item>
  </a-menu>
 </template>
@ -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 {
 <style lang="less" scoped>
  .contextmenu{
    position: fixed;
-    z-index: 1;
-
+    z-index: 1000;
    border-radius: 4px;
    box-shadow: -4px 4px 16px 1px @shadow-color !important;
  }
+  .ant-menu-item {
+    margin: 0 !important // 菜单项之间的缝隙会影响点击
+  }
 </style>
--- a/src/layouts/TabsView.vue
+++ b/src/layouts/TabsView.vue
@ -2,14 +2,15 @@
  <admin-layout>
    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
    <a-tabs
-      @contextmenu.native="e => onContextmenu(e)"
      v-if="multiPage"
+      type="editable-card"
      :active-key="activePage"
      :style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
      :hide-add="true"
-      type="editable-card"
      @change="changePage"
-      @edit="editPage">
+      @edit="editPage"
+      @contextmenu="onContextmenu"
+    >
      <a-tab-pane :key="page.fullPath" v-for="page in pageList">
        <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
      </a-tab-pane>
@ -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)
+}
 </script>

 <style scoped lang="less">