no message

resources/assets/js/components/DrawerOverlay.vue

@@ -9,14 +9,17 @@
                     </svg>
                 </a>
             </div>
+            <ResizeLine v-if="resize" class="overlay-resize" v-model="width" :max-width="0"/>
             <div class="overlay-content"><slot/></div>
         </div>
     </div>
 </template>
 
 <script>
+    import ResizeLine from "./ResizeLine";
     export default {
         name: 'DrawerOverlay',
+        components: {ResizeLine},
         props: {
             value: {
                 type: Boolean,
@@ -40,11 +43,15 @@
                 type: [Number, String],
                 default: "100%"
             },
+            resize: {
+                type: Boolean,
+                default: true
+            },
         },
 
         data() {
             return {
-
+                width: 0
             }
         },
 
@@ -58,7 +65,7 @@
 
         computed: {
             bodyStyle() {
-                let size = parseInt(this.size);
+                let size = this.width;
                 size = size <= 100 ? `${size}%` : `${size}px`
                 if (this.placement == 'right') {
                     return {
@@ -88,6 +95,12 @@
                         this.$store.state.cacheDrawerOverlay.splice(index, 1);
                     }
                 }
+            },
+            size: {
+                handler(val) {
+                    this.width = parseInt(val);
+                },
+                immediate: true
             }
         },
 

resources/assets/js/components/ResizeLine.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="component-resize-line" :class="{resizing}" @mousedown.left.stop.prevent="resizeDown"></div>
+</template>
+<style lang="scss" scoped>
+    .component-resize-line {
+        cursor: col-resize;
+        @media (max-width: 768px) {
+            display: none;
+        }
+        &.resizing {
+            &:after {
+                content: '';
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 99999;
+                cursor: col-resize;
+            }
+        }
+    }
+</style>
+<script>
+    export default {
+        name: 'ResizeLine',
+
+        props: {
+            value: {
+            },
+            minWidth: {
+                type: Number,
+                default: 100,
+            },
+            maxWidth: {
+                type: Number,
+                default: 600,
+            },
+        },
+
+        data() {
+            return {
+                resizing: false,
+
+                mouseX: 0,
+                mouseY: 0,
+
+                offset: {},
+
+                tmpWidth: undefined,
+            }
+        },
+
+        mounted() {
+            document.documentElement.addEventListener('mousemove', this.handleMove, true);
+            document.documentElement.addEventListener('mouseup', this.handleUp, true);
+        },
+
+        methods: {
+            resizeDown(e) {
+                this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
+                this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
+                this.offset = {
+                    left: e.target.offsetLeft,
+                    top: e.target.offsetTop,
+                };
+                this.resizing = true;
+                if (typeof this.value === 'number') {
+                    this.tmpWidth = this.value;
+                }
+                this.$emit('on-change', {
+                    event: 'down',
+                });
+            },
+            handleMove(e) {
+                if (!this.resizing) {
+                    return;
+                }
+                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;
+                    if (this.minWidth > 0) {
+                        value = Math.max(this.minWidth, value);
+                    }
+                    if (this.maxWidth > 0) {
+                        value = Math.min(this.maxWidth, value);
+                    }
+                    this.$emit("input", value);
+                }
+                this.$emit('on-change', {
+                    event: 'move',
+                    diff: {
+                        x: diffX,
+                        y: diffY,
+                    },
+                    offset: this.offset,
+                });
+            },
+            handleUp() {
+                this.resizing = false;
+                this.tmpWidth = undefined;
+                this.$emit('on-change', {
+                    event: 'up',
+                });
+            },
+        },
+    }
+</script>

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

@@ -54,6 +54,13 @@
             }
         }
 
+        .overlay-resize {
+            width: 100%;
+            height: 5px;
+            margin-bottom: -5px;
+            z-index: 1;
+        }
+
         .overlay-content {
             flex: 1;
             position: relative;
@@ -100,6 +107,12 @@
             .overlay-close {
                 align-items: flex-start;
             }
+            .overlay-resize {
+                width: 5px;
+                height: 100%;
+                margin-right: -5px;
+                z-index: 1;
+            }
             .overlay-content {
                 transform: translate(15%, 0) scale(0.98);
                 border-radius: 18px 0 0 18px;