左侧菜单宽度拖动改变优化

zyplayer-doc-ui/api-ui/src/components/share/GlobalLayout.vue

@@ -1,17 +1,15 @@
 <template>
     <a-layout class="api-menu-trigger">
         <a-layout-sider theme="light" :trigger="null" collapsible v-model:collapsed="appMenuCollapsed" :width="leftAsideWidth" style="height: 100vh;overflow: auto;">
-            <div class="logo">
+            <div class="header-border logo">
                 <img src="../../assets/api-logo.png">
                 <h1>API开放文档</h1>
             </div>
             <menu-layout :collapsed="appMenuCollapsed"></menu-layout>
         </a-layout-sider>
-        <div ref="rightResize" class="right-resize" v-show="!appMenuCollapsed">
-            <i ref="rightResizeBar">...</i>
-        </div>
+        <LeftResize v-model:value="leftAsideWidth" @change="leftAsideWidthChange" v-show="!appMenuCollapsed"></LeftResize>
         <a-layout>
-            <a-layout-header style="border-bottom: 2px solid #eee;background: #fff; padding: 0; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);-webkit-box-shadow:0 1px 4px rgba(0, 21, 41, 0.08);">
+            <a-layout-header class="header-border">
                 <a-row type="flex">
                     <a-col flex="auto">
                         <MenuUnfoldOutlined class="trigger" v-if="appMenuCollapsed" @click="turnLeftCollapse"/>
@@ -30,11 +28,12 @@
 
 <script>
     import MenuLayout from './MenuLayout.vue'
+    import LeftResize from '../layouts/components/LeftResize.vue'
     import {BarChartOutlined, MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons-vue';
 
     const minHeight = window.innerHeight - 64 - 122;
     export default {
-        components: {MenuLayout, BarChartOutlined, MenuFoldOutlined, MenuUnfoldOutlined},
+        components: {MenuLayout, LeftResize, BarChartOutlined, MenuFoldOutlined, MenuUnfoldOutlined},
         data() {
             return {
                 minHeight: minHeight + 'px',
@@ -44,7 +43,6 @@
         },
         computed: {},
         mounted() {
-            this.dragChangeLeftAsideWidth();
         },
         methods: {
             turnLeftCollapse() {
@@ -59,39 +57,6 @@
             },
             leftAsideWidthChange(width) {
                 this.$store.commit('setLeftAsideWidth', width);
-            },
-            dragChangeLeftAsideWidth: function() {
-                // 保留this引用
-                let resize = this.$refs.rightResize;
-                let resizeBar = this.$refs.rightResizeBar;
-                resize.onmousedown = e => {
-                    let startX = e.clientX;
-                    // 颜色改变提醒
-                    resize.style.background = "#ccc";
-                    resizeBar.style.background = "#aaa";
-                    resize.left = resize.offsetLeft;
-                    document.onmousemove = e2 => {
-                        // 计算并应用位移量
-                        let endX = e2.clientX;
-                        let moveLen = startX - endX;
-                        if ((moveLen < 0 && this.leftAsideWidth < 600) || (moveLen > 0 && this.leftAsideWidth > 280)) {
-                            startX = endX;
-                            this.leftAsideWidth -= moveLen;
-                            if (this.leftAsideWidth < 280) {
-                                this.leftAsideWidth = 280;
-                            }
-                            this.leftAsideWidthChange(this.leftAsideWidth);
-                        }
-                    };
-                    document.onmouseup = () => {
-                        // 颜色恢复
-                        resize.style.background = "#fafafa";
-                        resizeBar.style.background = "#ccc";
-                        document.onmousemove = null;
-                        document.onmouseup = null;
-                    };
-                    return false;
-                };
             }
         },
     }
@@ -109,6 +74,13 @@
     .trigger:hover {
         color: #1890ff;
     }
+    .header-border {
+        border-bottom: 2px solid #eee;
+        background: #fff;
+        padding: 0;
+        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+        -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    }
 
     .logo {
         height: 64px;
@@ -142,27 +114,4 @@
     .api-menu-trigger {
         min-height: 100%;
     }
-    .right-resize {
-        width: 5px;
-        cursor: w-resize;
-        background: #fafafa;
-    }
-    .right-resize i{
-        margin-top: 300px;
-        width: 5px;
-        height: 35px;
-        display: inline-block;
-        word-wrap: break-word;
-        word-break: break-all;
-        line-height: 8px;
-        border-radius: 5px;
-        background: #ccc;
-        color: #888;
-    }
-</style>
-
-<style>
-    .ant-layout-sider {
-        transition: none;
-    }
 </style>