优化DrawerOverlay组件

package.json

@@ -64,7 +64,7 @@
         "stylus-loader": "^6.2.0",
         "tinymce": "^5.10.2",
         "tui-calendar-hi": "^1.15.1-5",
-        "view-design-hi": "^4.7.0-5",
+        "view-design-hi": "^4.7.0-7",
         "vue": "^2.6.14",
         "vue-clipboard2": "^0.3.3",
         "vue-emoji-picker": "^1.0.3",

resources/assets/js/components/DrawerOverlay.vue

@@ -1,5 +1,9 @@
 <template>
-    <div :class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']">
+    <div
+        v-transfer-dom
+        :data-transfer="transfer"
+        :class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']"
+        :style="overlayStyle">
         <div class="overlay-mask" @click="mask"></div>
         <div class="overlay-body" :style="bodyStyle">
             <div class="overlay-close">
@@ -9,7 +13,7 @@
                     </svg>
                 </a>
             </div>
-            <ResizeLine v-if="resize" class="overlay-resize" v-model="width" :max-width="0"/>
+            <ResizeLine v-if="resize && placement == 'right'" class="overlay-resize" v-model="width" :min-width="100" :max-width="0" reverse/>
             <div class="overlay-content"><slot/></div>
         </div>
     </div>
@@ -17,9 +21,13 @@
 
 <script>
     import ResizeLine from "./ResizeLine";
+    import TransferDom from '../directives/transfer-dom';
+    import {mapState} from "vuex";
+
     export default {
         name: 'DrawerOverlay',
         components: {ResizeLine},
+        directives: { TransferDom },
         props: {
             value: {
                 type: Boolean,
@@ -43,15 +51,20 @@
                 type: [Number, String],
                 default: "100%"
             },
-            resize: {
+            resize: {   // only placement:right
                 type: Boolean,
                 default: true
             },
+            transfer: {
+                type: Boolean,
+                default: false
+            },
         },
 
         data() {
             return {
-                width: 0
+                width: 0,
+                zIndex: 0,
             }
         },
 
@@ -64,6 +77,14 @@
         },
 
         computed: {
+            ...mapState(['cacheDrawerIndex']),
+
+            overlayStyle() {
+                return {
+                    zIndex: 1000 + this.zIndex
+                }
+            },
+
             bodyStyle() {
                 let size = this.width;
                 size = size <= 100 ? `${size}%` : `${size}px`
@@ -95,6 +116,12 @@
                         this.$store.state.cacheDrawerOverlay.splice(index, 1);
                     }
                 }
+                //
+                if (val) {
+                    this.zIndex = this.$store.state.cacheDrawerIndex++;
+                } else if (this.$store.state.cacheDrawerOverlay.length === 0) {
+                    this.$store.state.cacheDrawerIndex = 0;
+                }
             },
             size: {
                 handler(val) {
@@ -111,17 +138,19 @@
                 }
             },
             close() {
-                this.$emit("input", !this.value)
+                this.$emit("input", false)
             },
             escClose(e) {
                 if (this.value && this.escClosable) {
                     if (e.keyCode === 27) {
-                        let show = false;
+                        if (this.$Modal.visibles().length > 0) {
-                        $A(".ivu-modal").each((i, e) => {
+                            return;
-                            show = $(e).is(":visible");
+                        }
-                            return !show;
+                        const list = this.$store.state.cacheDrawerOverlay;
-                        })
+                        if (list.length > 0) {
-                        !show && this.close()
+                            const $Drawer = list[list.length - 1]
+                            $Drawer.close();
+                        }
                     }
                 }
             }

resources/assets/js/components/ResizeLine.vue

@@ -36,6 +36,10 @@
                 type: Number,
                 default: 600,
             },
+            reverse: {
+                type: Boolean,
+                default: false
+            }
         },
 
         data() {
@@ -79,7 +83,7 @@
                 let diffX = (e.pageX || e.clientX + document.documentElement.scrollLeft) - this.mouseX;
                 let diffY = (e.pageY || e.clientY + document.documentElement.scrollTop) - this.mouseY;
                 if (typeof this.tmpWidth === 'number') {
-                    let value = this.tmpWidth + diffX;
+                    let value = this.reverse ? (this.tmpWidth - diffX) : (this.tmpWidth + diffX);
                     if (this.minWidth > 0) {
                         value = Math.max(this.minWidth, value);
                     }

resources/assets/js/store/state.js

@@ -8,6 +8,9 @@ state.windowMax768 = window.innerWidth <= 768;
 
 // 数据缓存
 state.cacheLoading = {};
+
+// DrawerOverlay
+state.cacheDrawerIndex = 0;
 state.cacheDrawerOverlay = [];
 
 // User

resources/assets/sass/components/drawer-overlay.scss

@@ -7,7 +7,7 @@
     z-index: 1000;
     box-sizing: border-box;
     pointer-events: none;
-    background: rgba(0, 0, 0, 0.76);
+    background: rgba(10, 10, 10, 0.76);
     outline: none;
     opacity: 0;
     display: flex;