完成第一步：定制自己的右键菜单

Former-commit-id: ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly 37d262cdbc810790b833d06503ca0c38d940310c [formerly 2afb0e2f7d7ca0d7ef3df1a34ccbf726786370d6]]]]]
Former-commit-id: 5868cdaeb5da645fd4964e4f8d0375e9bd8df178
Former-commit-id: 3742735054ffd6dea30adab4803c9d4187091467
Former-commit-id: 4907c8e6ed8b8769d5f441076d9e4c65474440d9 [formerly 4dab0307c98aef7e71ba749887fbb95a48b12ed5]
Former-commit-id: 224a72f5de9cdabacdac076fb58516dbca6a0216
Former-commit-id: 6f1576eec600ef6f192850f449ac6b67e71f30e1
Former-commit-id: 095d0f4d404728bb68ee56e4193ad4d53548a119
Former-commit-id: 9da6f4c2e4c0c2ef4f5ae43b34d9ad1c5f0910c0
Former-commit-id: 7b871cd75a69dfea4053644bc8852db779b67fb6

src/layout/header-aside/components/contextmenu/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="d2-contextmenu" v-show="flag" :style="style">
+    <slot />
+  </div>
+</template>
+<style>
+  .d2-contextmenu {
+    position: absolute;
+    padding: 5px;
+    z-index: 2018;
+    background: white;
+    border: 1px solid #cfd7e5;
+    border-radius: 3px;
+    box-shadow: 0px 0px 5px #ccc;
+  }
+</style>
+<script>
+export default {
+  name: 'd2-contextmenu',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    flag: {
+      get () {
+        console.log('change flag')
+        if (this.visible) {
+          // 注册全局监听事件[目前只考虑鼠标解除触发]
+          window.addEventListener('mousedown', this.watchContextmenu)
+        }
+        return this.visible
+      },
+      set (newVal) {
+        this.$emit('update:visible', newVal)
+      }
+    },
+    style () {
+      return {
+        left: this.x + 'px',
+        top: this.y + 'px',
+        display: this.visible === true ? 'block' : 'none '
+      }
+    }
+  },
+  methods: {
+    watchContextmenu () {
+      this.flag = false
+      window.removeEventListener('mousedown', this.watchContextmenu)
+    }
+  },
+  mounted () {
+    // 将菜单放置到body下
+    document.querySelector('body').appendChild(this.$el)
+  }
+}
+</script>

src/layout/header-aside/components/tabs/index.vue

@@ -2,18 +2,24 @@
   <div class="d2-multiple-page-control-group" flex>
     <div class="d2-multiple-page-control-content" flex-box="1">
       <div class="d2-multiple-page-control-content-inner">
+        <d2-contextmenu :visible.sync="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">
+          test
+        </d2-contextmenu>
         <el-tabs
           class="d2-multiple-page-control"
           :value="pageCurrent"
           type="card"
           :closable="true"
           @tab-click="handleClick"
-          @edit="handleTabsEdit">
+          @edit="handleTabsEdit"
+          @contextmenu.native="handleContextmenu">
           <el-tab-pane
+            class="hello"
             v-for="(page, index) in pageOpenedList"
             :key="index"
             :label="page.meta.title || '未命名'"
-            :name="page.name">
+            :name="page.name"
+            >
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -49,7 +55,18 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import D2Contextmenu from '../contextmenu'
 export default {
+  components: {
+    D2Contextmenu
+  },
+  data () {
+    return {
+      contextmenuFlag: false,
+      contentmenuX: 0,
+      contentmenuY: 0
+    }
+  },
   computed: {
     ...mapState({
       pageOpenedList: state => state.d2admin.pageOpenedList,
@@ -63,6 +80,20 @@ export default {
       'd2adminTagCloseOther',
       'd2adminTagCloseAll'
     ]),
+    /**
+     * @description 右键菜单功能点击
+     */
+    handleContextmenu (event) {
+      let target = event.target
+      if (target.className.indexOf('el-tabs__item') > -1 || target.parentNode.className.indexOf('el-tabs__item') > -1) {
+        event.preventDefault()
+        event.stopPropagation()
+        this.contextmenuFlag = true
+        this.contentmenuX = event.clientX
+        this.contentmenuY = event.clientY
+        console.log(event)
+      }
+    },
     /**
      * @description 接收点击关闭控制上选项的事件
      */