zydx-plus 1.35.634 → 1.35.635

package/package.json

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

package/src/components/variableBox/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="box" ref="boxRef">
     <!--      左侧内容，默认展示70%，默认最小宽度310px-->
-    <div v-if="isShowsLeft" class="left" ref="leftRef">
+    <div v-if="isShowsLeft" class="left" ref="leftRef" :style="{ width: leftWidth }">
       <slot name="left"></slot>
     </div>
     <div v-if="isShowsRight && isShowsLeft" class="resize">
       <img src="./drag.png" ref="resizeRef" style="width: 30px;height: 30px;position: absolute;top: 280px;left: 50%;transform: translateX(-15px)" alt="">
     </div>
-    <div v-if="isShowsRight" class="right" ref="rightRef">
+    <div v-if="isShowsRight" class="right" ref="rightRef" :style="{ width: rightWidth }">
       <!--      右侧内容，默认展示30%，默认最小宽度310px-->
       <slot name="right"></slot>
     </div>
@@ -44,39 +44,59 @@ export default {
     },
   },
   watch: {
-    isShowsRight: {
-      handler: function (v) {
-        setTimeout(() => {
-          if (this.isShowsRight) {
-            this.handleResize()
-          } else {
-            this.$refs.leftRef.style.width = '100%'
-          }
-        }, 200)
-      },
-      immediate: true,
-      deep: true
+    isShowsRight() {
+      this.$nextTick(() => {
+        if (this.isShowsRight) {
+          this.resetWidth()
+          this.handleResize()
+        } else if (this.$refs.leftRef) {
+          this.leftWidth = '100%'
+        }
+      })
     },
-    isShowsLeft: {
-      handler: function (v) {
-        setTimeout(() => {
-          if (this.isShowsLeft) {
-            this.handleResize()
-          } else {
-            this.$refs.rightRef.style.width = '100%'
-          }
-        }, 200)
-      },
-      immediate: true,
-      deep: true
+    isShowsLeft() {
+      this.$nextTick(() => {
+        if (this.isShowsLeft) {
+          this.resetWidth()
+          this.handleResize()
+        } else if (this.$refs.rightRef) {
+          this.rightWidth = '100%'
+        }
+      })
     }
   },
   data() {
-    return {};
+    // 由 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)`
+    }
   },
   mounted() {
+    this.handleResize()
   },
   methods: {
+    // 由 props 重新计算左右初始宽度（供显示切换/外部调用）
+    resetWidth() {
+      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)`
+      }
+    },
     handleResize() {
       // 获取Dom节点
       const boxDom = this.$refs.boxRef,
@@ -87,20 +107,12 @@ export default {
         // 使用 .resize div 的实际宽度（10px）而非 img 宽度（30px），避免拖动位置偏左
         const resizeWidth = resizeDom.parentElement.offsetWidth
         const maxWidth = boxDom.clientWidth - resizeWidth; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度
-        leftDom.style.width = `${this.isPercent?
-            this.leftInitWidth<=0||this.leftInitWidth>=100 ? 30 : this.leftInitWidth
-            : this.leftInitWidth}${this.isPercent? '%' : 'px'}`
-        rightDom.style.width = `${this.isPercent?
-            this.leftInitWidth<=0||this.leftInitWidth>=100 ? 70 : 100-this.leftInitWidth
-            : maxWidth-this.leftInitWidth}${this.isPercent? '%' : 'px'}`
-        /*leftDom.style.width = '50%'
-        rightDom.style.width = '50%'*/
         resizeDom.onmousedown = e => {
           const startX = e.clientX; // 记录坐标起始位置
-          leftDom.left = leftDom.offsetWidth; // 左边元素起始宽度
+          const startLeft = leftDom.offsetWidth; // 左边元素起始宽度
           document.onmousemove = e => {
             const endX = e.clientX; // 鼠标拖动的终止位置
-            let moveLen = leftDom.left + (endX - startX); // 移动的距离 =  endX - startX，左边区域最后的宽度 = resizeDom.left + 移动的距离
+            let moveLen = startLeft + (endX - startX); // 移动的距离 =  endX - startX，左边区域最后的宽度 = startLeft + 移动的距离
             // 限制左边区域的最小宽度为 leftMinWidth
             if (moveLen < this.leftMinWidth) {
               moveLen = this.leftMinWidth;
@@ -109,8 +121,9 @@ export default {
             if (moveLen > maxWidth - this.rightMinWidth) {
               moveLen = maxWidth - this.rightMinWidth;
             }
-            leftDom.style.width = (moveLen / maxWidth) * 100 + "%"; // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
-            rightDom.style.width = ((maxWidth - moveLen) / maxWidth) * 100 + "%"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
+            // 拖动时更新 data 属性（响应式绑定到 :style），避免与模板样式冲突
+            this.leftWidth = (moveLen / maxWidth) * 100 + "%"; // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
+            this.rightWidth = ((maxWidth - moveLen) / maxWidth) * 100 + "%"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
           };
           document.onmouseup = () => {
             document.onmousemove = null;
@@ -134,11 +147,12 @@ export default {
   box-sizing: border-box;
 }
 .left {
-  width: 50%;
+  flex-shrink: 0;
 }
 .resize {
   position: relative;
   width: 10px;
+  flex-shrink: 0;
   cursor: col-resize;
   background-size: cover;
   background-position: center;
@@ -150,6 +164,6 @@ export default {
   background-color: white;
 }
 .right {
-  width: 50%;
+  flex-shrink: 0;
 }
 </style>

package/src/index.js

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