fix: popup append change visible when is true

Author: chuanshuoye

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zarm-vue",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "zarm in vue",
   "tags": [
     "zarm",

src/popup/src/popup.vue

@@ -1,7 +1,8 @@
 <template lang="html">
-  <div :class='{
+  <div 
+    :class='{
       [`${prefixCls}`]: true,
-      [`${prefixCls}-hidden`]: !currentVisible,
+      [`${prefixCls}-hidden`]: !maskVisible,
     }'
   >
     <div :class='{
@@ -10,7 +11,9 @@
       }'
       :style='transitionDurationStyle'
     >
-      <slot></slot>
+      <template v-if="currentVisible">
+        <slot></slot>
+      </template>
     </div>
     <za-mask
       :class='[`fade-${animationState}`]'
@@ -104,10 +107,10 @@ export default {
       if (value) {
         this.enter();
       } else {
-        this.currentVisible = value;
         this.animationState = 'leave';
+        this.maskVisible = false;
         this.timerLeave = setTimeout(() => {
-          this.maskVisible = false;
+          this.currentVisible = value;
         }, this.animationDuration);
       }
     },

src/stack-picker/src/stack-picker.vue

@@ -133,6 +133,9 @@ export default {
     visible(val, oldVal) { // eslint-disable-line no-unused-vars
       if (this.currentVisible === val) return;
       this.currentVisible = val;
+      if (val) {
+        this.reposition();
+      }
     },
     value(val, oldVal) { // eslint-disable-line no-unused-vars
       const param = {
@@ -302,11 +305,11 @@ export default {
       }
     },
   },
-  mounted() {
-    this.reposition();
-  },
-  updated() {
-    this.reposition();
-  },
+  // mounted() {
+  //   this.reposition();
+  // },
+  // updated() {
+  //   this.reposition();
+  // },
 };
 </script>

test/unit/specs/cascader-pick.spec.js

@@ -61,7 +61,7 @@ describe('CascadePicker', () => {
       data() {
         return {
           value: '',
-          visible: false,
+          visible: true,
           data,
         };
       },

test/unit/specs/datepick.spec.js

@@ -202,15 +202,14 @@ describe('DatePicker', () => {
     vm = createVue({
       template: `
       <za-date-select
-        :visible.sync='visible'
         v-model='value'
         mode='date'
         @ok='handleOk'/>
       `,
       data() {
         return {
           value: '2000-01-01',
-          visible: false,
+          visible: true,
         };
       },
       methods: {
@@ -219,8 +218,9 @@ describe('DatePicker', () => {
         },
       },
     }, true);
-    vm.$el.querySelector('.za-picker-submit').click();
+    vm.$el.click();
     vm.$nextTick(() => {
+      vm.$el.querySelector('.za-picker-submit').click();
       expect(value.getFullYear()).to.equal(2000);
       done();
     });
@@ -231,15 +231,14 @@ describe('DatePicker', () => {
     vm = createVue({
       template: `
       <za-date-select
-        :visible.sync='visible'
         v-model='value'
         mode='date'
         @ok='handleOk'/>
       `,
       data() {
         return {
           value: '2000-01-01',
-          visible: false,
+          visible: true,
         };
       },
       methods: {
@@ -248,6 +247,7 @@ describe('DatePicker', () => {
         },
       },
     }, true);
+    vm.$el.click();
     vm.$nextTick(() => {
       vm.value = '2018-07-06';
       vm.$nextTick(() => {

test/unit/specs/input-number.spec.js

@@ -40,6 +40,7 @@ describe('InputNumber', () => {
         <za-input-number type="number"></za-input-number>
       `,
     }, true);
+    vm.$el.click();
     vm.$nextTick(() => {
       const disabledItem = vm.$el.querySelectorAll('.za-keyboard-item')[9];
       expect(disabledItem.classList.contains('za-keyboard-item-disabled')).to.be.true;
@@ -73,6 +74,7 @@ describe('InputNumber', () => {
         };
       },
     }, true);
+    vm.$el.click();
     vm.v1 = '12311';
     vm.$nextTick(() => {
       const contentEl = vm.$el.querySelector('.za-input-content');
@@ -92,6 +94,7 @@ describe('InputNumber', () => {
         };
       },
     }, true);
+    vm.$el.click();
     vm.$nextTick(() => {
       vm.$el.querySelector('.za-keyboard-item').click();
       expect(vm.v1).to.equal('1231');

test/unit/specs/pick.spec.js

@@ -187,6 +187,7 @@ describe('Picker', () => {
       template: `
       <za-picker
         v-model='value'
+        :visible.sync='visible'
         :dataSource='data1'/>
       `,
       data() {
@@ -253,7 +254,7 @@ describe('Picker', () => {
       data() {
         return {
           value: '',
-          visible: false,
+          visible: true,
           data1: [
             { value: '1', label: '选项一' },
             { value: '2', label: '选项二' },
@@ -287,7 +288,7 @@ describe('Picker', () => {
       data() {
         return {
           value: '1',
-          visible: false,
+          visible: true,
           data1: [
             { value: '1', label: '选项一' },
             { value: '2', label: '选项二' },

test/unit/specs/stackpick.spec.js

@@ -64,7 +64,7 @@ describe('StackPicker', () => {
       data() {
         return {
           value: [],
-          visible: false,
+          visible: true,
           data,
         };
       },