1. vuex里 对d2adminTagCloseLeft，d2adminTagCloseRight，d2adminTagCloseOther 做了兼容性改造【使得你的文档不需要修改】：

无参数测试和参数测试都通过了
2. 增加了一个contentmenuList做右键菜单内容的渲染和调用 —— 如果需要将参数提出出来做样式的配置，我需要一个参数列表。


Former-commit-id: 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly a1a2811342e61d0008f9199254070d700fd3b5bc [formerly 118b051ea28087166f54eedbf4af330e827f3e9c [formerly e4ec6d960fca41d9fbc5c5247ec2dff051bd52ee]]]]]
Former-commit-id: 81e60a1c9c6f35d4683d6caa8ba1e0fa69f8a2e7
Former-commit-id: fd9303ed5c8c13a87a67ee2b803aab4f45665eca
Former-commit-id: 8cf659c2a6adf39509fd79ecd295bc020ca833a4 [formerly 242bb104727c67d7c5fb3d2861ca3fb09e8c91a4]
Former-commit-id: 2fa2f3625e7db96c90c1dcf2fba4da685f233be8
Former-commit-id: bc7df38e257b2025ce107f09b01292ba256ee94c
Former-commit-id: d07007823fcd159cb496ed0db922e017449a5ea6
Former-commit-id: 72e5cd2e6d9c3293f38fa6eee6fb34b3e6947ad3
Former-commit-id: f704ab58381896ae24c78f6bf677fc9e23c73273

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="d2-contentmenu-list" @click="rowClick">
+    <div class="d2-contentmenu-item" flex="cross:center main:center" v-for="item in menulist" :key="item.value" :data-value="item.value">
+      <d2-icon v-if="item.icon" :name="item.icon"/>
+      <div class="d2-contentmenu-item-title" flex-box="1">{{item.title}}</div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+  .d2-contentmenu-list {
+    .d2-contentmenu-item {
+      padding: 8px 20px;
+      margin: 0;
+      font-size: 14px;
+      color: #606266;
+      cursor: pointer;
+      &:hover {
+        background: #ecf5ff;
+        color: #66b1ff;
+      }
+      .d2-contentmenu-item-title {
+        margin-left: 10px;
+      }
+    }
+  }
+</style>
+<script>
+  export default {
+    props: {
+      menulist: {
+        type: Array,
+        default: () => []
+      }
+    },
+    methods: {
+      rowClick (event) {
+        let target = event.target
+        while(!target.dataset.value) {
+          target = target.parentNode
+        }
+        this.$emit('rowClick', target.dataset.value)
+      }
+    }
+  }
+</script>

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

@@ -6,12 +6,12 @@
 <style>
   .d2-contextmenu {
     position: absolute;
-    padding: 5px;
+    padding: 5px 0;
     z-index: 2018;
     background: white;
-    border: 1px solid #cfd7e5;
-    border-radius: 3px;
-    box-shadow: 0px 0px 5px #ccc;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   }
 </style>
 <script>
@@ -54,8 +54,8 @@ export default {
     }
   },
   methods: {
-    watchContextmenu () {
-      this.flag = false
+    watchContextmenu (event) {
+      if (!this.$el.contains(event.target)) this.flag = false
       window.removeEventListener('mousedown', this.watchContextmenu)
     }
   },

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

@@ -3,7 +3,7 @@
     <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-list :menulist="contextmenuList" @rowClick="contextmenuClick"></d2-contextmenu-list>
         </d2-contextmenu>
         <el-tabs
           class="d2-multiple-page-control"
@@ -56,15 +56,40 @@
 <script>
 import { mapState, mapMutations } from 'vuex'
 import D2Contextmenu from '../contextmenu'
+import D2ContextmenuList from '../contextmenu/components/contentmenuList'
 export default {
   components: {
-    D2Contextmenu
+    D2Contextmenu,
+    D2ContextmenuList
   },
   data () {
     return {
       contextmenuFlag: false,
       contentmenuX: 0,
-      contentmenuY: 0
+      contentmenuY: 0,
+      contextmenuList: [
+        {
+          icon: 'arrow-left',
+          title: '关闭左侧',
+          value: 'left'
+        },
+        {
+          icon: 'arrow-right',
+          title: '关闭右侧',
+          value: 'right'
+        },
+        {
+          icon: 'times',
+          title: '关闭其它',
+          value: 'other'
+        },
+        {
+          icon: 'times-circle',
+          title: '关闭全部',
+          value: 'all'
+        }
+      ],
+      tagName: 'index'
     }
   },
   computed: {
@@ -88,25 +113,36 @@ export default {
       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)
+        this.tagName = target.getAttribute('aria-controls').slice(5)
+        this.contextmenuFlag = true
       }
     },
+    /**
+     * @description 右键菜单的row-click事件
+     */
+    contextmenuClick (command) {
+      this.handleControlItemClick(command, this.tagName)
+    },
     /**
      * @description 接收点击关闭控制上选项的事件
      */
-    handleControlItemClick (command) {
+    handleControlItemClick (command, tagName = null) {
+      if (tagName) this.contextmenuFlag = false
+      const params = {
+        pageSelect: tagName,
+        vm: this
+      }
       switch (command) {
         case 'left':
-          this.d2adminTagCloseLeft()
+          this.d2adminTagCloseLeft(params)
           break
         case 'right':
-          this.d2adminTagCloseRight()
+          this.d2adminTagCloseRight(params)
           break
         case 'other':
-          this.d2adminTagCloseOther()
+          this.d2adminTagCloseOther(params)
           break
         case 'all':
           this.d2adminTagCloseAll(this)