zydx-plus 1.35.588 → 1.35.589

package/package.json

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

package/src/components/calendar/src/Calendar.vue

@@ -1,6 +1,6 @@
 <template>
   <teleport to="body">
-    <div class="cale" :style="{top: y + 'px', left: x + 'px'}">
+    <div ref="caleRef" v-if="isOpen" class="cale" :style="{top: y + 'px', left: x + 'px'}">
       <div class="cale-cont">
         <div class='calendar-Time-header under_line'>
           <span class='calendar-lastY' @click="subYear">《</span>
@@ -206,17 +206,14 @@ export default {
     domeElement: {
       type: Object,
       default: null
+    },
+    open: {
+      type: Boolean,
+      default: false
     }
   },
   created() {
     this.render();
-    if(this.domeElement) {
-      let el = this.domeElement.$el
-      if(!el) el = this.domeElement
-      const dome = el.getBoundingClientRect()
-      this.x = dome.left
-      this.y = dome.top + dome.height
-    }
   },
   data() {
     return {
@@ -242,12 +239,32 @@ export default {
       minute: '00', // 选择的分钟
       dayChange: undefined, // 选择的日期
       x: 22,
-      y: 0
+      y: 0,
+      isOpen: false
     };
   },
   methods: {
+    init() {
+      this.$nextTick(() => {
+        if(this.domeElement) {
+          let el = this.domeElement.$el
+          if(!el) el = this.domeElement
+          const height = document.documentElement.clientHeight || document.body.clientHeight;
+          const dome = el.getBoundingClientRect()
+          const hei = this.$refs.caleRef.getBoundingClientRect()
+          this.x = dome.left
+          if((dome.top + hei.height - height) > 0) {
+            this.y = dome.top - hei.height
+          }else {
+            this.y = dome.top + dome.height
+          }
+        }
+      })
+    },
     cancel() {
+      this.isOpen = false
       this.$emit('cancel')
+      this.$emit('update:open', this.isOpen)
     },
     confirm() {
       let date = {start: this.dayChange}
@@ -661,20 +678,35 @@ export default {
 
       if (type == 1) { //上限值
         let _dateEnd = that.toDateByStr1(that.dateEnd);
-        if (firstD <= _dateEnd && _dateEnd <= lastD) {
-          return true;
-        } else
-          return false;
+        return firstD <= _dateEnd && _dateEnd <= lastD;
       } else { //下限值
         let _dateStart = that.toDateByStr1(that.dateStart);
-        if (firstD <= _dateStart && _dateStart <= lastD) {
-          return true;
-        } else
-          return false;
+        return firstD <= _dateStart && _dateStart <= lastD;
+      }
+    },
+    handler() {
+      if (this.isOpen) {
+        setTimeout(() => {
+          this.isOpen = false
+          this.$emit('update:open', this.isOpen)
+        }, 100)
       }
     },
   },
   watch: {
+    open: {
+      handler: function (v) {
+        this.isOpen = v
+        if(v) {
+          this.init()
+          window.addEventListener('scroll', this.handler)
+        }else {
+          window.removeEventListener('scroll', this.handler)
+        }
+      },
+      immediate: true,
+      deep: true
+    },
     currentTime: function (val, oldVal) { //时间改变
       let dateNew = this.toDateByStr1(val);
       if (dateNew.getFullYear() === this.year && (dateNew.getMonth() + 1) === this.month) {

package/src/components/year/src/year.vue

@@ -1,6 +1,6 @@
 <template>
   <teleport to="body">
-    <div class="year" :style="{top: y + 'px', left: x + 'px'}">
+    <div ref="yearRef" v-if="isOpen" class="year" :style="{top: y + 'px', left: x + 'px'}">
       <div class="year-cont">
         <div class='calendar-Time-header under_line'>
           <span class='calendar-lastMonth' @click="last">{{ lastText }}</span>
@@ -43,6 +43,10 @@ export default {
     domeElement: {
       type: Object,
       default: null
+    },
+    open: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -53,20 +57,55 @@ export default {
       max: 0,
       timeObj: 0,
       x: 0,
-      y: 0
+      y: 0,
+      isOpen: false
     }
   },
   created() {
     this.render();
-    if(this.domeElement) {
-      let el = this.domeElement.$el
-      if(!el) el = this.domeElement
-      const dome = el.getBoundingClientRect()
-      this.x = dome.left
-      this.y = dome.top + dome.height
+  },
+  watch: {
+    open: {
+      handler: function (v) {
+        this.isOpen = v
+        if(v) {
+          this.init()
+          window.addEventListener('scroll', this.handler)
+        }else {
+          window.removeEventListener('scroll', this.handler)
+        }
+      },
+      immediate: true,
+      deep: true
     }
   },
   methods: {
+    init() {
+      this.$nextTick(() => {
+        if(this.domeElement) {
+          let el = this.domeElement.$el
+          if(!el) el = this.domeElement
+          const height = document.documentElement.clientHeight || document.body.clientHeight;
+          const dome = el.getBoundingClientRect()
+          const hei = this.$refs.yearRef.getBoundingClientRect()
+          this.x = dome.left
+          if((dome.top + hei.height - height) > 0) {
+            this.y = dome.top - hei.height
+          }else {
+            console.log(dome)
+            this.y = dome.top + dome.height
+          }
+        }
+      })
+    },
+    handler() {
+      if (this.isOpen) {
+        setTimeout(() => {
+          this.isOpen = false
+          this.$emit('update:open', this.isOpen)
+        }, 100)
+      }
+    },
     render() {
       this.timeObj = new Date().getFullYear();
       this.min = this.timeObj - 5
@@ -107,9 +146,7 @@ export default {
 
 <style scoped>
 .year{
-  position: absolute;
-  top: 22px;
-  right: 0;
+  position: fixed;
   width: 300px;
   z-index: 100;
   background-color: #fff;

package/src/index.js

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