zydx-plus 1.35.580 → 1.35.582

package/package.json

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

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

@@ -212,9 +212,8 @@ export default {
     // 监听窗口变化
     window.addEventListener('resize', () => {
       const wid = document.getElementById('app').offsetWidth
-      if(this.fixedStart) {
-        if(wid <= this.initWidth) return
-        this.x = this.left + (wid-this.initWidth)/2
+      if(this.state) {
+        this.footRightOffset = wid
       }
     });
     document.onmouseup = () => {
@@ -235,19 +234,8 @@ export default {
   methods: {
     handleFullScreenChange() {
       if (!document.fullscreenElement) {
-        let clientWidth = window.innerWidth
-        this.x = clientWidth / 2 - this.width / 2;
-        this.y = (window.innerHeight / 2 - this.height / 2) - 80;
-        this.footDownOffset = this.height;
-        this.footRightOffset = this.width;
-        this.draggableState.draggable({enabled: true})
+        this.reducePop()
         this.state = false
-        this.$emit('updateDrag', {
-          width: this.footRightOffset,
-          height: this.footDownOffset - ((this.dragTextShow)?60:30),
-          left: this.x,
-          top: this.y
-        })
         this.$emit('enlarge', this.state)
       }
     },
@@ -324,6 +312,8 @@ export default {
           this.y=isNaN(this.y)?100:this.y
         }
       }
+      if(this.x < 0) this.x = 0
+      if(this.y < 0) this.y = 0
       setTimeout(() => {
         this.draggableState = interact(`#draggable${that.id}`)
         this.draggableState.draggable({
@@ -404,27 +394,33 @@ export default {
       })
       this.footIsMove = false;
     },
-    enlarge() {
-      let clientWidth = window.innerWidth
-      if(this.state) {
-        this.exitFullscreen()
-        this.x = clientWidth / 2 - this.width / 2;
-        this.y = window.innerHeight / 2 - this.height / 2;
+    reducePop() {
+      setTimeout(() => {
+        this.x = document.documentElement.clientWidth / 2 - this.width / 2;
+        this.y = document.documentElement.clientHeight / 2 - this.height / 2;
         this.footDownOffset = this.height;
         this.footRightOffset = this.width;
+        if(this.x < 0) this.x = 0
+        if(this.y < 0) this.y = 0
         this.$emit('updateDrag', {
           width: this.footRightOffset,
           height: this.footDownOffset - ((this.dragTextShow)?60:30),
           left: this.x,
           top: this.y
         })
+      },100)
+    },
+    enlarge() {
+      if(this.state) {
+        this.exitFullscreen()
+        this.reducePop()
       }else {
         this.fullScreen()
         setTimeout(() => {
           this.x = 0;
           this.y = 0;
-          this.footDownOffset = window.outerHeight + 20;
-          this.footRightOffset = window.outerWidth + 20;
+          this.footDownOffset = document.documentElement.clientHeight;
+          this.footRightOffset = document.documentElement.clientWidth;
           this.$emit('updateDrag', {
             width: this.footRightOffset,
             height: this.footDownOffset - ((this.dragTextShow)?60:30),

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

@@ -212,9 +212,8 @@ export default {
     // 监听窗口变化
     window.addEventListener('resize', () => {
       const wid = document.getElementById('app').offsetWidth
-      if(this.fixedStart) {
-        if(wid <= this.initWidth) return
-        this.x = this.left + (wid-this.initWidth)/2
+      if(this.state) {
+        this.footRightOffset = wid
       }
     });
     setTimeout(() => {
@@ -242,19 +241,8 @@ export default {
   methods: {
      handleFullScreenChange() {
        if (!document.fullscreenElement) {
-         let clientWidth = window.innerWidth
-         this.x = clientWidth / 2 - this.width / 2;
-         this.y = (window.innerHeight / 2 - this.height / 2) - 80;
-         this.footDownOffset = this.height;
-         this.footRightOffset = this.width;
-         this.draggableState.draggable({enabled: true})
+         this.reducePop()
          this.state = false
-         this.$emit('updateDrag', {
-           width: this.footRightOffset,
-           height: this.footDownOffset - ((this.dragTextShow)?60:30),
-           left: this.x,
-           top: this.y
-         })
          this.$emit('enlarge', this.state)
        }
     },
@@ -317,6 +305,7 @@ export default {
     },
     init() {
       let that = this
+      console.log(window.devicePixelRatio)
       if(this.fixedStart) {
         if(!this.isInitShowBottomRight) {
           const wid = document.getElementById('app').offsetWidth
@@ -332,6 +321,8 @@ export default {
           this.y=isNaN(this.y)?100:this.y
         }
       }
+      if(this.x < 0) this.x = 0
+      if(this.y < 0) this.y = 0
       setTimeout(() => {
         this.draggableState = interact(`#draggable${that.id}`)
         this.draggableState.draggable({
@@ -413,27 +404,33 @@ export default {
       })
       this.footIsMove = false;
     },
-    enlarge() {
-      let clientWidth = window.innerWidth
-      if(this.state) {
-        this.exitFullscreen()
-        this.x = clientWidth / 2 - this.width / 2;
-        this.y = window.innerHeight / 2 - this.height / 2;
+    reducePop() {
+      setTimeout(() => {
+        this.x = document.documentElement.clientWidth / 2 - this.width / 2;
+        this.y = document.documentElement.clientHeight / 2 - this.height / 2;
         this.footDownOffset = this.height;
         this.footRightOffset = this.width;
+        if(this.x < 0) this.x = 0
+        if(this.y < 0) this.y = 0
         this.$emit('updateDrag', {
           width: this.footRightOffset,
           height: this.footDownOffset - ((this.dragTextShow)?60:30),
           left: this.x,
           top: this.y
         })
+      },100)
+    },
+    enlarge() {
+      if(this.state) {
+        this.exitFullscreen()
+        this.reducePop()
       }else {
         this.fullScreen()
         setTimeout(() => {
           this.x = 0;
           this.y = 0;
-          this.footDownOffset = window.outerHeight + 20;
-          this.footRightOffset = window.outerWidth + 20;
+          this.footDownOffset = document.documentElement.clientHeight;
+          this.footRightOffset = document.documentElement.clientWidth;
           this.$emit('updateDrag', {
             width: this.footRightOffset,
             height: this.footDownOffset - ((this.dragTextShow)?60:30),

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

@@ -1731,10 +1731,10 @@ export default {
   overflow: hidden;
 }
 .magnifier-head{
-  height: 30px;
+  height: 20px;
   width: 100%;
   background: #4B0C77;
-  line-height: 30px;
+  line-height: 20px;
   display: flex;
   justify-content: space-between;
   padding: 0 5px;
@@ -1743,12 +1743,12 @@ export default {
 .magnifier-icon>img{
   width: 16px !important;
   height: 16px !important;
-  margin-left: 10px;
+  margin-left: 6px;
   position: relative;
   top: 2px;
 }
 .magnifier-title{
-  font-size: 14px;
+  font-size: 12px;
   color: #fff;
 }
 .magnifier-cont{

package/src/components/select/src/select.vue

@@ -1,6 +1,5 @@
 <template>
-  <onClickOutSide :target="dropdown"
-                  :handler="handler">
+  <onClickOutSide :target="dropdown" :handler="handler">
     <div class="wrapper">
       <div class="custom-select"
            :class="{ 'readonly': readonly }">
@@ -8,12 +7,10 @@
                :value="selected"
                :placeholder="placeholder"
                :readonly="true"
-               @click="toggleDropDown"
+               @click.stop="toggleDropDown"
                class="select-css" />
 
-        <span class="custom-select-icons"
-              v-if="!readonly"
-              @click="toggleDropDown">
+        <span class="custom-select-icons" v-if="!readonly">
           <svg xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
@@ -24,20 +21,21 @@
             </g>
           </svg>
         </span>
-        <transition>
+        <teleport to="body">
           <template v-if="!readonly">
             <template v-if="options.length">
               <ul v-if="isOpen"
                   ref="dropdown"
+                  :style="{position: 'fixed', 'z-index': '30000', left: x + 'px', top: y + 'px', width: width + 'px'}"
                   :class="{ 'custom-select-options': true, 'scroll': maxHeight > 0 }">
                 <li v-for="(option, idx) in options"
                     :key="idx"
                     :class="option.disable ? 'disable': ''"
-                    @click="handleClick(option)">{{ option.label }}</li>
+                    @click.stop="handleClick(option)">{{ option.label }}</li>
               </ul>
             </template>
           </template>
-        </transition>
+        </teleport>
       </div>
     </div>
   </onClickOutSide>
@@ -85,17 +83,27 @@ export default defineComponent({
   data() {
     return {
       isOpen: false,
-      selected: null
+      selected: null,
+      x: 0,
+      y: 0,
+      width: 0
     }
   },
   methods: {
-    toggleDropDown: function () {
+    toggleDropDown: function (e) {
+      const { x, y, width, height } = e.target.getBoundingClientRect()
+      this.x = x
+      this.y = y + height
+      this.width = width
       this.isOpen = !this.isOpen
+      if(this.isOpen) {
+        window.addEventListener('scroll', this.handler)
+      }else {
+        window.removeEventListener('scroll', this.handler)
+      }
     },
     handleClick: function (option) {
-      if(option.disable) {
-          return
-      }
+      if(option.disable) return
       this.$emit('update:value', option.value)
       this.$emit('select', option)
       this.selected = option.label
@@ -103,7 +111,9 @@ export default defineComponent({
     },
     handler: function () {
       if (this.isOpen) {
-        this.isOpen = false
+        setTimeout(() => {
+          this.isOpen = false
+        }, 200)
       }
     }
   },
@@ -267,4 +277,34 @@ export default defineComponent({
 .disable {
   color: gray !important;
 }
+
+
+/* 适用于Webkit浏览器 */
+::-webkit-scrollbar {
+  display: unset !important;
+  width: 2px !important;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-track {
+  display: unset !important;
+  background: #f1f1f1 !important;
+  width: 2px !important;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  display: unset !important;
+  background: #888 !important;
+  width: 2px !important;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  display: unset !important;
+  background: #555 !important;
+  width: 2px !important;
+  border-radius: 5px;
+}
+
 </style>

package/src/index.js

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