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

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/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 接收点击关闭控制上选项的事件
      */