zydx-plus 1.35.635 → 1.35.637

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.635",
+  "version": "1.35.637",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/variableBox/index.vue

@@ -46,73 +46,71 @@ export default {
   watch: {
     isShowsRight() {
       this.$nextTick(() => {
-        if (this.isShowsRight) {
-          this.resetWidth()
-          this.handleResize()
-        } else if (this.$refs.leftRef) {
-          this.leftWidth = '100%'
-        }
+        this.resetWidth()
+        this.handleResize()
       })
     },
     isShowsLeft() {
       this.$nextTick(() => {
-        if (this.isShowsLeft) {
-          this.resetWidth()
-          this.handleResize()
-        } else if (this.$refs.rightRef) {
-          this.rightWidth = '100%'
-        }
+        this.resetWidth()
+        this.handleResize()
       })
     }
   },
   data() {
-    // 由 props 直接计算初始宽度，保证首屏渲染即为正确宽度，避免闪动
-    const w = this.leftInitWidth
-    if (this.isPercent) {
-      const lw = w <= 0 || w >= 100 ? 30 : w
-      return {
-        leftWidth: lw + '%',
-        rightWidth: (100 - lw) + '%'
-      }
-    }
-    return {
-      leftWidth: w + 'px',
-      // px 模式右侧占满剩余空间，无需测量容器宽度即可首屏正确
-      rightWidth: `calc(100% - ${w}px - 10px)`
-    }
+    // 由 props 与可见性直接计算初始宽度，保证首屏渲染即为正确宽度，避免闪动
+    return this.getInitWidth()
   },
   mounted() {
     this.handleResize()
   },
   methods: {
-    // 由 props 重新计算左右初始宽度（供显示切换/外部调用）
-    resetWidth() {
+    // 根据 props 与可见性计算左右宽度
+    getInitWidth() {
+      // 右侧隐藏时，左侧占满 100%
+      if (!this.isShowsRight) {
+        return { leftWidth: '100%', rightWidth: '0' }
+      }
+      // 左侧隐藏时，右侧占满 100%
+      if (!this.isShowsLeft) {
+        return { leftWidth: '0', rightWidth: '100%' }
+      }
       const w = this.leftInitWidth
       if (this.isPercent) {
         const lw = w <= 0 || w >= 100 ? 30 : w
-        this.leftWidth = lw + '%'
-        this.rightWidth = (100 - lw) + '%'
-      } else {
-        this.leftWidth = w + 'px'
-        this.rightWidth = `calc(100% - ${w}px - 10px)`
+        return { leftWidth: lw + '%', rightWidth: (100 - lw) + '%' }
+      }
+      return {
+        leftWidth: w + 'px',
+        // px 模式右侧占满剩余空间，无需测量容器宽度即可首屏正确
+        rightWidth: `calc(100% - ${w}px - 10px)`
       }
     },
+    // 由 props 与可见性重新计算左右宽度（供显示切换/外部调用）
+    resetWidth() {
+      const { leftWidth, rightWidth } = this.getInitWidth()
+      this.leftWidth = leftWidth
+      this.rightWidth = rightWidth
+    },
     handleResize() {
       // 获取Dom节点
       const boxDom = this.$refs.boxRef,
-          leftDom = this.$refs.leftRef,
-          resizeDom = this.$refs.resizeRef,
-          rightDom = this.$refs.rightRef;
+          resizeDom = this.$refs.resizeRef;
       if (resizeDom) {
         // 使用 .resize div 的实际宽度（10px）而非 img 宽度（30px），避免拖动位置偏左
         const resizeWidth = resizeDom.parentElement.offsetWidth
-        const maxWidth = boxDom.clientWidth - resizeWidth; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度
         resizeDom.onmousedown = e => {
-          const startX = e.clientX; // 记录坐标起始位置
-          const startLeft = leftDom.offsetWidth; // 左边元素起始宽度
+          e.preventDefault()
+          // 记录按下瞬间分隔条位置，计算鼠标相对分隔条左边缘的抓取偏移
+          const handleRect = resizeDom.parentElement.getBoundingClientRect()
+          const grabOffset = e.clientX - handleRect.left
           document.onmousemove = e => {
-            const endX = e.clientX; // 鼠标拖动的终止位置
-            let moveLen = startLeft + (endX - startX); // 移动的距离 =  endX - startX，左边区域最后的宽度 = startLeft + 移动的距离
+            // 每帧重新测量容器实际宽度与位置，避免整体宽度变化（窗口/父容器缩放）导致的累计偏移
+            const curBoxRect = boxDom.getBoundingClientRect()
+            const containerWidth = curBoxRect.width
+            const maxWidth = containerWidth - resizeWidth; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度
+            // 鼠标相对容器左边缘的位置 - 抓取偏移 = 新的左区域宽度(px)，使抓取点始终贴合分隔条
+            let moveLen = (e.clientX - curBoxRect.left) - grabOffset
             // 限制左边区域的最小宽度为 leftMinWidth
             if (moveLen < this.leftMinWidth) {
               moveLen = this.leftMinWidth;
@@ -121,9 +119,10 @@ export default {
             if (moveLen > maxWidth - this.rightMinWidth) {
               moveLen = maxWidth - this.rightMinWidth;
             }
-            // 拖动时更新 data 属性（响应式绑定到 :style），避免与模板样式冲突
-            this.leftWidth = (moveLen / maxWidth) * 100 + "%"; // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
-            this.rightWidth = ((maxWidth - moveLen) / maxWidth) * 100 + "%"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
+            // 百分比基准用完整容器宽，右侧再减去 resize 宽度，
+            // 保证 left% + right% + resize(10px) = 100%，避免拖拽后总宽多出 10px
+            this.leftWidth = (moveLen / containerWidth) * 100 + "%"; // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
+            this.rightWidth = ((containerWidth - moveLen - resizeWidth) / containerWidth) * 100 + "%"; // 右边区域 = 容器 - 左边宽度 - 拖动条宽度
           };
           document.onmouseup = () => {
             document.onmousemove = null;

package/src/index.js

@@ -87,7 +87,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.635',
+    version: '1.35.637',
     install,
     Calendar,
     Message,