优化DrawerOverlay组件支持底部显示动态改变尺寸

resources/assets/js/components/DrawerOverlay.vue

@@ -13,7 +13,7 @@
                     </svg>
                 </a>
             </div>
-            <ResizeLine v-if="resize && placement == 'right'" class="overlay-resize" v-model="width" :min-width="100" :max-width="0" reverse/>
+            <ResizeLine v-if="resize" class="overlay-resize" :placement="placement" v-model="dynamicSize" :min="minSize" :max="0" reverse/>
             <div class="overlay-content"><slot/></div>
         </div>
     </div>
@@ -51,7 +51,11 @@
                 type: [Number, String],
                 default: "100%"
             },
-            resize: {   // only placement:right
+            minSize: {
+                type: Number,
+                default: 300
+            },
+            resize: {
                 type: Boolean,
                 default: true
             },
@@ -63,7 +67,7 @@
 
         data() {
             return {
-                width: 0,
+                dynamicSize: 0,
                 zIndex: 0,
             }
         },
@@ -86,7 +90,7 @@
             },
 
             bodyStyle() {
-                let size = this.width;
+                let size = this.dynamicSize;
                 size = size <= 100 ? `${size}%` : `${size}px`
                 if (this.placement == 'right') {
                     return {
@@ -125,7 +129,7 @@
             },
             size: {
                 handler(val) {
-                    this.width = parseInt(val);
+                    this.dynamicSize = parseInt(val);
                 },
                 immediate: true
             }

resources/assets/js/components/ResizeLine.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="component-resize-line" :class="{resizing}" @mousedown.left.stop.prevent="resizeDown"></div>
+    <div class="component-resize-line" :class="[resizing ? 'resizing' : '', placement]" @mousedown.left.stop.prevent="resizeDown"></div>
 </template>
 <style lang="scss" scoped>
     .component-resize-line {
@@ -19,6 +19,12 @@
                 cursor: col-resize;
             }
         }
+        &.bottom {
+            cursor: row-resize;
+            &:after {
+                cursor: row-resize;
+            }
+        }
     }
 </style>
 <script>
@@ -28,14 +34,20 @@
         props: {
             value: {
             },
-            minWidth: {
+            min: {
                 type: Number,
                 default: 100,
             },
-            maxWidth: {
+            max: {
                 type: Number,
                 default: 600,
             },
+            placement: {
+                validator (value) {
+                    return ['right', 'bottom'].includes(value)
+                },
+                default: 'bottom'
+            },
             reverse: {
                 type: Boolean,
                 default: false
@@ -51,7 +63,7 @@
 
                 offset: {},
 
-                tmpWidth: undefined,
+                tmpSize: undefined,
             }
         },
 
@@ -70,7 +82,7 @@
                 };
                 this.resizing = true;
                 if (typeof this.value === 'number') {
-                    this.tmpWidth = this.value;
+                    this.tmpSize = this.value;
                 }
                 this.$emit('on-change', {
                     event: 'down',
@@ -82,13 +94,18 @@
                 }
                 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.reverse ? (this.tmpWidth - diffX) : (this.tmpWidth + diffX);
-                    if (this.minWidth > 0) {
-                        value = Math.max(this.minWidth, value);
+                if (typeof this.tmpSize === 'number') {
+                    let value;
+                    if (this.placement == 'bottom') {
+                        value = this.reverse ? (this.tmpSize - diffY) : (this.tmpSize + diffY);
+                    } else {
+                        value = this.reverse ? (this.tmpSize - diffX) : (this.tmpSize + diffX);
                     }
-                    if (this.maxWidth > 0) {
-                        value = Math.min(this.maxWidth, value);
+                    if (this.min > 0) {
+                        value = Math.max(this.min, value);
+                    }
+                    if (this.max > 0) {
+                        value = Math.min(this.max, value);
                     }
                     this.$emit("input", value);
                 }
@@ -103,7 +120,7 @@
             },
             handleUp() {
                 this.resizing = false;
-                this.tmpWidth = undefined;
+                this.tmpSize = undefined;
                 this.$emit('on-change', {
                     event: 'up',
                 });