新增模块：flex.css 【快速布局】

新增选项卡右键菜单


Former-commit-id: bbb22c61d92d8aa0a4f9860ce000dc53e26ba23c

package.json

@@ -24,7 +24,8 @@
     "ua-parser-js": "^0.7.18",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "flex.css": "^1.1.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.0-rc.4",

src/assets/style/theme/theme-base.scss

@@ -28,23 +28,11 @@
     @extend %full;
     $d2-theme-header-height: 60px;
     .d2-theme-header {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      right: 0px;
       height: $d2-theme-header-height;
     }
     .d2-theme-container {
-      position: absolute;
-      top: $d2-theme-header-height;
-      bottom: 0px;
-      left: 0px;
-      right: 0px;
-      display: flex;
-      flex-direction: row;
       .d2-theme-container-aside {
         transition: width .3s;
-        flex-grow: 0;
         position: relative;
         .d2-layout-header-aside-menu-side {
           @extend %full;
@@ -52,18 +40,11 @@
         }
       }
       .d2-theme-container-main {
-        flex-grow: 1;
         padding: 0px;
         position: relative;
         overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        .d2-theme-container-main-header {
-          flex-grow: 0;
-        }
         .d2-theme-container-main-body {
           flex-grow: 1;
-          margin-top: 1px;
           position: relative;
         }
       }
@@ -192,10 +173,6 @@
           margin: 10px;
           margin-top: 0px;
           border-radius: 4px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
           @extend %unable-select;
           i {
             font-size: 30px;
@@ -219,15 +196,11 @@
         .d2-theme-container-main-header {
           // 多页面控制器
           .d2-multiple-page-control-group {
-            display: flex;
+            padding-right: 20px;
-            margin-right: 20px;
             .d2-multiple-page-control-content {
-              flex-grow: 1;
+              overflow: auto;
               position: relative;
               .d2-multiple-page-control-content-inner {
-                position: absolute;
-                left: 0px;
-                right: 0px;
                 .d2-multiple-page-control {
                   .el-tabs__header.is-top {
                     margin: 0px;

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

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="d2-contentmenu-list"
+    @click="rowClick">
+    <div
+      v-for="item in menulist"
+      :key="item.value"
+      :data-value="item.value"
+      class="d2-contentmenu-item"
+      flex="cross:center main:center">
+      <d2-icon
+        v-if="item.icon"
+        :name="item.icon"/>
+      <div
+        class="d2-contentmenu-item-title"
+        flex-box="1">
+        {{item.title}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-contextmenu-list',
+  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>
+
+<style lang="scss">
+.d2-contentmenu-list {
+  .d2-contentmenu-item {
+    padding: 8px 20px 8px 15px;
+    margin: 0;
+    font-size: 14px;
+    color: #606266;
+    cursor: pointer;
+    &:hover {
+      background: #ecf5ff;
+      color: #66b1ff;
+    }
+    .d2-contentmenu-item-title {
+      margin-left: 10px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="d2-contextmenu"
+    v-show="flag"
+    :style="style">
+    <slot/>
+  </div>
+</template>
+
+<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 () {
+        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 ? '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>
+
+<style>
+.d2-contextmenu {
+  position: absolute;
+  padding: 5px 0;
+  z-index: 2018;
+  background: #FFF;
+  border: 1px solid #cfd7e5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+}
+</style>

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

@@ -1,24 +1,35 @@
 <template>
-  <div class="d2-multiple-page-control-group">
+  <div class="d2-multiple-page-control-group" flex>
-    <div class="d2-multiple-page-control-content">
+    <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="tagName === 'index' ? contextmenuListIndex : contextmenuList"
+            @rowClick="contextmenuClick"/>
+        </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>
     </div>
-    <div class="d2-multiple-page-control-btn">
+    <div
+      class="d2-multiple-page-control-btn"
+      flex-box="0">
       <el-dropdown
         split-button
         @click="handleControlBtnClick"
@@ -50,6 +61,27 @@
 <script>
 import { mapState, mapMutations } from 'vuex'
 export default {
+  components: {
+    D2Contextmenu: () => import('../contextmenu'),
+    D2ContextmenuList: () => import('../contextmenu/components/contentmenuList')
+  },
+  data () {
+    return {
+      contextmenuFlag: false,
+      contentmenuX: 0,
+      contentmenuY: 0,
+      contextmenuListIndex: [
+        { icon: 'times-circle', title: '关闭全部', value: 'all' }
+      ],
+      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 +95,46 @@ 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/layout/header-aside/layout.vue

@@ -6,7 +6,7 @@
     <!-- 半透明遮罩 -->
     <div class="d2-layout-header-aside-mask"></div>
     <!-- 主体内容 -->
-    <div class="d2-layout-header-aside-content">
+    <div class="d2-layout-header-aside-content" flex="dir:top">
       <!-- 顶栏 -->
       <div class="d2-theme-header">
         <div class="logo-group" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
@@ -26,7 +26,7 @@
         </div>
       </div>
       <!-- 下面 主体 -->
-      <div class="d2-theme-container">
+      <div class="d2-theme-container"  flex-box="1" flex>
         <!-- 主体 侧边栏 -->
         <div
           ref="aside"
@@ -35,11 +35,11 @@
           <d2-menu-side/>
         </div>
         <!-- 主体 -->
-        <div class="d2-theme-container-main">
+        <div class="d2-theme-container-main"  flex-box="1" flex="dir:top">
-          <div class="d2-theme-container-main-header">
+          <div class="d2-theme-container-main-header" flex-box="0">
             <d2-tabs/>
           </div>
-          <div class="d2-theme-container-main-body">
+          <div class="d2-theme-container-main-body" flex-box="1">
             <transition name="fade-transverse">
               <keep-alive :include="d2adminKeepAliveInclude">
                 <router-view/>

src/main.js

@@ -1,6 +1,8 @@
 import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App'
+// flex.css
+import 'flex.css'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import screenfull from 'screenfull'

src/store/modules/d2admin.js

@@ -453,17 +453,25 @@ export default {
      * @class pageOpenedList
      * @description 关闭当前标签左边的标签
      * @param {vuex state} state vuex state
+     * @param {Object} param1 { pageSelect: 当前选中的tagName, vm: vue }
      */
-    d2adminTagCloseLeft (state) {
+    d2adminTagCloseLeft (state, { pageSelect, vm } = {}) {
+      const pageAim = pageSelect || state.pageCurrent
       let currentIndex = 0
       state.pageOpenedList.forEach((page, index) => {
-        if (page.name === state.pageCurrent) {
+        if (page.name === pageAim) {
           currentIndex = index
         }
       })
       if (currentIndex > 0) {
         state.pageOpenedList.splice(1, currentIndex - 1)
       }
+      state.pageCurrent = pageAim
+      if (vm && vm.$route.name !== pageAim) {
+        vm.$router.push({
+          name: pageAim
+        })
+      }
       // 更新设置到数据库
       this.commit('d2adminUtilVuex2DbByUuid', 'pageOpenedList')
     },
@@ -471,15 +479,23 @@ export default {
      * @class pageOpenedList
      * @description 关闭当前标签右边的标签
      * @param {vuex state} state vuex state
+     * @param {Object} param1 { pageSelect: 当前选中的tagName, vm: vue }
      */
-    d2adminTagCloseRight (state) {
+    d2adminTagCloseRight (state, { pageSelect, vm } = {}) {
+      const pageAim = pageSelect || state.pageCurrent
       let currentIndex = 0
       state.pageOpenedList.forEach((page, index) => {
-        if (page.name === state.pageCurrent) {
+        if (page.name === pageAim) {
           currentIndex = index
         }
       })
       state.pageOpenedList.splice(currentIndex + 1)
+      state.pageCurrent = pageAim
+      if (vm && vm.$route.name !== pageAim) {
+        vm.$router.push({
+          name: pageAim
+        })
+      }
       // 更新设置到数据库
       this.commit('d2adminUtilVuex2DbByUuid', 'pageOpenedList')
     },
@@ -487,11 +503,13 @@ export default {
      * @class pageOpenedList
      * @description 关闭当前激活之外的 tag
      * @param {vuex state} state vuex state
+     * @param {Object} param1 { pageSelect: 当前选中的tagName, vm: vue }
      */
-    d2adminTagCloseOther (state) {
+    d2adminTagCloseOther (state, { pageSelect, vm } = {}) {
+      const pageAim = pageSelect || state.pageCurrent
       let currentIndex = 0
       state.pageOpenedList.forEach((page, index) => {
-        if (page.name === state.pageCurrent) {
+        if (page.name === pageAim) {
           currentIndex = index
         }
       })
@@ -501,6 +519,12 @@ export default {
         state.pageOpenedList.splice(currentIndex + 1)
         state.pageOpenedList.splice(1, currentIndex - 1)
       }
+      state.pageCurrent = pageAim
+      if (vm && vm.$route.name !== pageAim) {
+        vm.$router.push({
+          name: pageAim
+        })
+      }
       // 更新设置到数据库
       this.commit('d2adminUtilVuex2DbByUuid', 'pageOpenedList')
     },