zydx-plus 1.35.526 → 1.35.527

package/package.json

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

package/src/components/dragPopup/src/dragPopup.vue

@@ -11,16 +11,16 @@
         <i v-if="closeShow" @click.stop="close"></i>
       </div>
     </div>
-    <div :class="{'drag-cont2': fixedStart,'drag-conts': true}"
+    <div :id="`resizable${id}`" :class="{'drag-cont2': fixedStart,'drag-conts': true}"
          @mousemove.stop="footMove" @mouseleave.stop="footMove">
       <div class="drag-cont-slot">
         <slot name="content"></slot>
       </div>
-      <div v-show="!fixedStart&&!autoHeight">
+<!--      <div v-show="!fixedStart&&!autoHeight">-->
 <!--        <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>-->
-        <i :class="{'drag-in2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
+<!--        <i :class="{'drag-in2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>-->
 <!--        <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>-->
-      </div>
+<!--      </div>-->
     </div>
 <!--    <div class="down-text" v-if="dragStatus&&dragTextShow&&!fixedStart&&!autoHeight">-->
 <!--      <div class="down-text-cont">-->
@@ -55,7 +55,9 @@ export default {
       clientHeight: 0,
       transAll: false,
       fixedStart: false,
-      initWidth: 1280
+      initWidth: 1280,
+      draggableState: null,
+      draggableState2: null,
     }
   },
   props: {
@@ -152,7 +154,6 @@ export default {
         this.footDownOffset = val
         if (this.isInitShowBottomRight) {
           this.y = window.innerHeight - val
-          console.log('this.y', this.y)
         }
       },
       immediate: true
@@ -160,6 +161,7 @@ export default {
     fixed: {
       handler: function (val) {
         this.fixedStart = val
+        if(!this.fixedStart) return
         this.init()
       },
       immediate: true,
@@ -219,6 +221,8 @@ export default {
   methods: {
     // 全屏
     fullScreen() {
+      this.draggableState.draggable({enabled: false})
+      this.draggableState2.resizable({enabled: false})
       const myElement = document.body;
       if (myElement.requestFullscreen) {
         myElement.requestFullscreen();
@@ -233,6 +237,8 @@ export default {
     },
     // 退出全屏
     exitFullscreen() {
+      this.draggableState.draggable({enabled: true})
+      this.draggableState2.resizable({enabled: true})
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.mozCancelFullScreen) {
@@ -285,11 +291,11 @@ export default {
         this.y=isNaN(this.y)?100:this.y
       }
       setTimeout(() => {
-        interact(`#draggable${that.id}`).draggable({
+        this.draggableState = interact(`#draggable${that.id}`)
+        this.draggableState2 = interact(`#resizable${that.id}`)
+        this.draggableState.draggable({
+          enabled: true,
           listeners: {
-            start (event) {
-              that.dragTap()
-            },
             move (event) {
               // 获取滚动距离
               const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
@@ -310,6 +316,22 @@ export default {
             }
           }
         })
+        this.draggableState2.resizable({
+          edges: { top: false, left: false, bottom: true, right: true },
+          enabled: true,
+          listeners: {
+            move: function (event) {
+              that.footRightOffset = event.rect.width
+              that.footDownOffset = event.rect.height + (that.dragTextShow?60:30)
+              that.$emit('updateDrag', {
+                width: that.footRightOffset,
+                height: that.footDownOffset - (that.dragTextShow?60:30),
+                left: that.x,
+                top: that.y
+              })
+            }
+          }
+        })
       },0)
     },
     getWH(v) {
@@ -370,8 +392,8 @@ export default {
         setTimeout(() => {
           this.x = 0;
           this.y = 0;
-          this.footDownOffset = window.outerHeight;
-          this.footRightOffset = window.outerWidth;
+          this.footDownOffset = window.outerHeight + 20;
+          this.footRightOffset = window.outerWidth + 20;
         },100)
       }
       this.$emit('updateDrag', {
@@ -406,6 +428,8 @@ export default {
   width: 100%;
   height: 100%;
   overflow: auto;
+  position: relative;
+  z-index: -1;
 }
 
 .drag-cont-slot::-webkit-scrollbar {

package/src/components/dragPopup2/src/dragPopup.vue

@@ -12,16 +12,15 @@
           <i v-if="closeShow" @click.stop="close"></i>
         </div>
       </div>
-      <div :class="{'drag-cont2': fixedStart,'drag-conts': true}"
-           @mousemove.stop="footMove" @mouseleave.stop="footMove">
+      <div :id="`resizable${id}`" :class="{'drag-cont2': fixedStart,'drag-conts': true}">
         <div class="drag-cont-slot">
           <slot name="content"></slot>
         </div>
-        <div v-show="!fixedStart&&!autoHeight">
-          <!--        <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>-->
-          <i :class="{'drag-in2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
-          <!--        <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>-->
-        </div>
+<!--        <div v-show="!fixedStart&&!autoHeight">-->
+<!--          <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>-->
+<!--          <i :class="{'drag-in2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>-->
+<!--          <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>-->
+<!--        </div>-->
       </div>
       <!--    <div class="down-text" v-if="dragStatus&&dragTextShow&&!fixedStart&&!autoHeight">-->
       <!--      <div class="down-text-cont">-->
@@ -56,7 +55,9 @@ export default {
       clientHeight: 0,
       transAll: false,
       fixedStart: false,
-      initWidth: 1280
+      initWidth: 1280,
+      draggableState: null,
+      draggableState2: null,
     }
   },
   props: {
@@ -164,6 +165,7 @@ export default {
     fixed: {
       handler: function (val) {
         this.fixedStart = val
+        if(!this.fixedStart) return
         this.init()
       },
       immediate: true,
@@ -227,20 +229,24 @@ export default {
   methods: {
     // 全屏
     fullScreen() {
+      this.draggableState.draggable({enabled: false})
+      this.draggableState2.resizable({enabled: false})
       const myElement = document.body;
       if (myElement.requestFullscreen) {
         myElement.requestFullscreen();
-      } else if (myElement.mozRequestFullScreen) { // Firefox
+      } else if (myElement.mozRequestFullScreen) {
         myElement.mozRequestFullScreen();
-      } else if (myElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
+      } else if (myElement.webkitRequestFullscreen) {
         myElement.webkitRequestFullscreen();
-      } else if (myElement.msRequestFullscreen) { // IE and Edge
+      } else if (myElement.msRequestFullscreen) {
         myElement.msRequestFullscreen();
       }
       this.state = true
     },
     // 退出全屏
     exitFullscreen() {
+      this.draggableState.draggable({enabled: true})
+      this.draggableState2.resizable({enabled: true})
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.mozCancelFullScreen) {
@@ -294,7 +300,10 @@ export default {
         this.y=isNaN(this.y)?100:this.y
       }
       setTimeout(() => {
-        interact(`#draggable${that.id}`).draggable({
+        this.draggableState = interact(`#draggable${that.id}`)
+        this.draggableState2 = interact(`#resizable${that.id}`)
+        this.draggableState.draggable({
+          enabled: true,
           listeners: {
             move (event) {
               // 获取滚动距离
@@ -316,6 +325,22 @@ export default {
             }
           }
         })
+        this.draggableState2.resizable({
+              edges: { top: false, left: false, bottom: true, right: true },
+              enabled: true,
+              listeners: {
+                move: function (event) {
+                  that.footRightOffset = event.rect.width
+                  that.footDownOffset = event.rect.height + (that.dragTextShow?60:30)
+                  that.$emit('updateDrag', {
+                    width: that.footRightOffset,
+                    height: that.footDownOffset - (that.dragTextShow?60:30),
+                    left: that.x,
+                    top: that.y
+                  })
+                }
+              }
+            })
       },0)
     },
     getWH(v) {
@@ -326,43 +351,6 @@ export default {
         this.transAll = false
       },300)
     },
-    footDown(event, v) {
-      event.preventDefault()
-      this.direction = v
-      this.footIsMove = true;
-      this.dragTap()
-    },
-    footMove(event) {
-      if (this.state) return;
-      if (!this.footIsMove) return;
-      if (this.direction === 'd') {
-        this.footDownOffset = event.clientY - this.y;
-      } else if (this.direction === 'in') {
-        this.footDownOffset = event.clientY - this.y;
-        this.footRightOffset = event.clientX - this.x;
-      } else if (this.direction === 'r') {
-        this.footRightOffset = event.clientX - this.x;
-      }
-      if(this.footRightOffset < this.minWidth) {
-        this.footRightOffset = this.minWidth
-      }
-      if(this.footDownOffset < this.minHeight) {
-        this.footDownOffset = this.minHeight
-      }
-      this.$emit('updateDrag', {
-        width: this.footRightOffset,
-        height: this.footDownOffset - ((this.dragTextShow)?60:30),
-        left: this.x,
-        top: this.y
-      })
-    },
-    footUp() {
-      this.$emit('dragMouseup', {
-        width: this.footRightOffset,
-        height: this.footDownOffset - ((this.dragTextShow)?60:30)
-      })
-      this.footIsMove = false;
-    },
     enlarge() {
       let clientWidth = window.innerWidth
       if(this.state) {
@@ -376,8 +364,8 @@ export default {
         setTimeout(() => {
           this.x = 0;
           this.y = 0;
-          this.footDownOffset = window.outerHeight;
-          this.footRightOffset = window.outerWidth;
+          this.footDownOffset = window.outerHeight + 20;
+          this.footRightOffset = window.outerWidth + 20;
         },100)
       }
       this.$emit('updateDrag', {
@@ -412,6 +400,8 @@ export default {
   width: 100%;
   height: 100%;
   overflow: auto;
+  position: relative;
+  z-index: -1;
 }
 
 .drag-cont-slot::-webkit-scrollbar {

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.526',
+    version: '1.35.527',
     install,
     Calendar,
     Message,