Merge branch 'feature/tabsContextMenu' into develop

Former-commit-id: 19ee7eba58cc5fe4a6973bf4ecd16f4d7b480871 [formerly af09b56532e69671c3c2038087c67173157d85c8] [formerly 19ee7eba58cc5fe4a6973bf4ecd16f4d7b480871 [formerly af09b56532e69671c3c2038087c67173157d85c8] [formerly 19ee7eba58cc5fe4a6973bf4ecd16f4d7b480871 [formerly af09b56532e69671c3c2038087c67173157d85c8] [formerly af09b56532e69671c3c2038087c67173157d85c8 [formerly c1fb3608322920551fbee991206fb8d2e135418a [formerly 9caea2f71233f50326cacb64e7ea6fac0123c674]]]]]
Former-commit-id: 1ad35ce3307585bba2515f4900c2ecea31e6fee7
Former-commit-id: 96d0b66dc23ea1f91be168494965d7fc179a616a
Former-commit-id: 671cd30da4956683602fb0acdc2ea11a5d964349 [formerly e156d4165f9687908a57c83fcb97b2599d3b207a]
Former-commit-id: f28bef03ee171218e915df6cee866a35e15fbcd3
Former-commit-id: 8470d434f61ba76918bd59690e55a5490eb1705c
Former-commit-id: 121a23fd194e4c6995f586889c0a7922bd45e31c
Former-commit-id: 2609d129843c0b5d4eac8ca033587bc19cdb9422
Former-commit-id: a52d35fd78cbc43142b76ccb69505425d847ded8

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="d2-contextmenu" v-show="flag" :style="style">
+    <slot />
+  </div>
+</template>
+<style>
+  .d2-contextmenu {
+    position: absolute;
+    padding: 5px 0;
+    z-index: 2018;
+    background: white;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  }
+</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 (event) {
+      if (!this.$el.contains(event.target)) 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">
+          <d2-contextmenu-list :menulist="contextmenuList" @rowClick="contextmenuClick"></d2-contextmenu-list>
+        </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,43 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import D2Contextmenu from '../contextmenu'
+import D2ContextmenuList from '../contextmenu/components/contentmenuList'
 export default {
+  components: {
+    D2Contextmenu,
+    D2ContextmenuList
+  },
+  data () {
+    return {
+      contextmenuFlag: false,
+      contentmenuX: 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: {
     ...mapState({
       pageOpenedList: state => state.d2admin.pageOpenedList,
@@ -63,19 +105,44 @@ 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.contentmenuX = event.clientX
+        this.contentmenuY = event.clientY
+        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)

src/store/modules/d2admin.js.REMOVED.git-id

@@ -1 +1 @@
-2b2ad59e01ff445075c4b6d63e425cba12153aec
+22b6be35e998dbde4cfb9b13b41394742608265b