zydx-plus 1.35.465 → 1.35.467

package/package.json

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

package/src/components/flip/src/flip.vue

@@ -101,6 +101,7 @@
 <script>
 import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js'
 import Mess from '../../tipBox/index'
+import {debounce} from '../../utils'
 
 PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
 
@@ -1176,9 +1177,9 @@ export default {
         })
       })
     },
-    readPdf() {
+    readPdf:debounce(function (){
       let that = this
-      this.mouse()
+      that.mouse()
       pdfs.getPage(that.pageIndex).then(function (page) {
         let canvas = document.getElementById(that.id)
         let canvas2 = document.getElementById(`${that.id}2`)
@@ -1228,12 +1229,12 @@ export default {
           that.processing()
         }, 1000)
       })
-    },
-    readDoublePdf() {
+    },200),
+    readDoublePdf:debounce(function (){
       let that = this
-      this.mouse()
-      this.$nextTick(()=>{
-        this.pageInfoArr.forEach((item,index)=>{
+      that.mouse()
+      that.$nextTick(()=>{
+        that.pageInfoArr.forEach((item,index)=>{
           pdfs.getPage(index+1).then(function (page) {
             let canvas = document.getElementById(item.id)
             let canvas2 = document.getElementById(`${item.id}2`)
@@ -1286,7 +1287,7 @@ export default {
           })
         })
       })
-    },
+    },200),
     generateUniqueKey (){
       // Math.random().toString(36).substr(2)
       return `${new Date().getTime()}${Math.random().toString(36).substr(2)}`;

package/src/components/variableBox/index.vue

@@ -4,7 +4,7 @@
     <div v-if="isShowsLeft" class="left" ref="leftRef">
       <slot name="left"></slot>
     </div>
-    <div v-if="isShowsRight||isShowsLeft" class="resize" ref="resizeRef"></div>
+    <div v-if="isShowsRight && isShowsLeft" class="resize" ref="resizeRef"></div>
     <div v-if="isShowsRight" class="right" ref="rightRef">
       <!--      右侧内容，默认展示30%，默认最小宽度310px-->
       <slot name="right"></slot>
@@ -16,38 +16,38 @@
 export default {
   name: "zydx-variable-box",
   props: {
-    isShowsRight:{
+    isShowsRight: {
       type: Boolean,
       default: true
     },
-    isShowsLeft:{
+    isShowsLeft: {
       type: Boolean,
       default: true
     },
   },
   watch: {
-    isShowsRight:{
+    isShowsRight: {
       handler: function (v) {
         setTimeout(() => {
-          if(v) {
+          if (this.isShowsRight) {
             this.handleResize()
           } else {
             this.$refs.leftRef.style.width = '100%'
           }
-        } , 100)
+        }, 200)
       },
       immediate: true,
       deep: true
     },
-    isShowsLeft:{
+    isShowsLeft: {
       handler: function (v) {
         setTimeout(() => {
-          if(v) {
+          if (this.isShowsLeft) {
             this.handleResize()
           } else {
             this.$refs.rightRef.style.width = '100%'
           }
-        } , 100)
+        }, 200)
       },
       immediate: true,
       deep: true
@@ -65,32 +65,36 @@ export default {
           leftDom = this.$refs.leftRef,
           resizeDom = this.$refs.resizeRef,
           rightDom = this.$refs.rightRef;
-      resizeDom.onmousedown = e => {
-        const startX = e.clientX; // 记录坐标起始位置
-        leftDom.left = leftDom.offsetWidth; // 左边元素起始宽度
-        document.onmousemove = e => {
-          const endX = e.clientX; // 鼠标拖动的终止位置
-          let moveLen = leftDom.left + (endX - startX); // 移动的距离 =  endX - startX，左边区域最后的宽度 = resizeDom.left + 移动的距离
-          const maxWidth = boxDom.clientWidth - resizeDom.offsetWidth; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度
-          // 限制左边区域的最小宽度为 leftMinWidth
-          if (moveLen < leftMinWidth) {
-            moveLen = leftMinWidth;
-          }
-          // 右边区域最小宽度为 rightMinWidth
-          if (moveLen > maxWidth - rightMinWidth) {
-            moveLen = maxWidth - rightMinWidth;
-          }
-          leftDom.style.width = (moveLen / maxWidth) * 100 + "%"; // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
-          rightDom.style.width = ((maxWidth - moveLen) / maxWidth) * 100 + "%"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
+      if (resizeDom) {
+        leftDom.style.width = '50%'
+        rightDom.style.width = '50%'
+        resizeDom.onmousedown = e => {
+          const startX = e.clientX; // 记录坐标起始位置
+          leftDom.left = leftDom.offsetWidth; // 左边元素起始宽度
+          document.onmousemove = e => {
+            const endX = e.clientX; // 鼠标拖动的终止位置
+            let moveLen = leftDom.left + (endX - startX); // 移动的距离 =  endX - startX，左边区域最后的宽度 = resizeDom.left + 移动的距离
+            const maxWidth = boxDom.clientWidth - resizeDom.offsetWidth; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度
+            // 限制左边区域的最小宽度为 leftMinWidth
+            if (moveLen < leftMinWidth) {
+              moveLen = leftMinWidth;
+            }
+            // 右边区域最小宽度为 rightMinWidth
+            if (moveLen > maxWidth - rightMinWidth) {
+              moveLen = maxWidth - rightMinWidth;
+            }
+            leftDom.style.width = (moveLen / maxWidth) * 100 + "%"; // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
+            rightDom.style.width = ((maxWidth - moveLen) / maxWidth) * 100 + "%"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
+          };
+          document.onmouseup = () => {
+            document.onmousemove = null;
+            document.onmouseup = null;
+            resizeDom.releaseCapture && resizeDom.releaseCapture(); // 鼠标捕获释放
+          };
+          resizeDom.setCapture && resizeDom.setCapture(); // 启用鼠标捕获
+          return false;
         };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-          document.onmouseup = null;
-          resizeDom.releaseCapture && resizeDom.releaseCapture(); // 鼠标捕获释放
-        };
-        resizeDom.setCapture && resizeDom.setCapture(); // 启用鼠标捕获
-        return false;
-      };
+      }
     }
   }
 };
@@ -104,10 +108,7 @@ export default {
   box-sizing: border-box;
 }
 .left {
-  width: calc(100% - 315px);
-  background-color: #f1eab3;
-  border-right: 2px solid #dcdfe6;
-  overflow: hidden;
+  width: 50%;
 }
 .resize {
   position: relative;
@@ -115,15 +116,13 @@ export default {
   cursor: col-resize;
   background-size: cover;
   background-position: center;
+  border-right: 2px solid #dcdfe6;
+  border-left: 2px solid #dcdfe6;
 }
 .resize:hover {
-  /*background-color: #45a3ff;*/
   background-color: white;
 }
 .right {
-  width: 310px;
-  background-color: #b5ef8f;
-  border-left: 2px solid #dcdfe6;
-  overflow: hidden;
+  width: 50%;
 }
 </style>

package/src/index.js

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