zydx-plus 1.35.636 → 1.35.638

package/package.json

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

package/src/components/seek/src/word.vue

@@ -286,7 +286,7 @@ export default {
         // 解析选项并回填答案
         if (item.testKey) {
           item.testKey = typeof item.testKey === 'string' ? JSON.parse(item.testKey) : item.testKey
-          this.markCheckedOptions(item)
+          // this.markCheckedOptions(item) // 选择题选项的选中状态checked的值是true还是false，在组件外面引用该组件的父级组件中根据参数设置好了，不再用此处方法在组件内部处理了
         }
 
         return item

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;
       if (resizeDom) {
         // 使用 .resize div 的实际宽度（10px）而非 img 宽度（30px），避免拖动位置偏左
         const resizeWidth = resizeDom.parentElement.offsetWidth
-        const containerWidth = boxDom.clientWidth
-        const maxWidth = containerWidth - 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;

package/src/index.js

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