[Improvement] optimize find parent mixin (#781)

packages/actionsheet/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <transition name="van-actionsheet-float">
+  <transition name="van-slide-bottom">
     <div class="van-actionsheet" :class="{ 'van-actionsheet--withtitle': title }" v-show="value">
       <div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
         <div v-text="title" />
-        <icon name="close" @click.stop="$emit('input', false)" />
+        <icon name="close" @click="$emit('input', false)" />
       </div>
-      <ul v-if="!title" class="van-actionsheet__list van-hairline--bottom">
+      <ul v-else class="van-hairline--bottom">
         <li
           v-for="(item, index) in actions"
           :key="index"
@@ -24,7 +24,7 @@
         v-if="cancelText"
         v-text="cancelText"
         class="van-actionsheet__item van-actionsheet__cancel van-hairline--top"
-        @click.stop="$emit('input', false)"
+        @click="$emit('input', false)"
       />
       <div v-else class="van-actionsheet__content">
         <slot />

packages/checkbox/index.vue

@@ -40,44 +40,33 @@ export default create({
     }
   },
 
-  watch: {
-    value(val) {
-      this.$emit('change', val);
-    }
-  },
-
-  data() {
-    this.findParentByName('van-checkbox-group');
-    return {};
-  },
-
   computed: {
     currentValue: {
       get() {
-        return this.parentGroup
-          ? this.parentGroup.value.indexOf(this.name) !== -1
+        return this.parent
+          ? this.parent.value.indexOf(this.name) !== -1
           : this.value;
       },
 
       set(val) {
-        const { parentGroup } = this;
-        if (parentGroup) {
-          const parentValue = this.parentGroup.value.slice();
+        const { parent } = this;
+        if (parent) {
+          const parentValue = this.parent.value.slice();
           if (val) {
-            if (parentGroup.max && parentValue.length >= parentGroup.max) {
+            if (parent.max && parentValue.length >= parent.max) {
               return;
             }
             /* istanbul ignore else */
             if (parentValue.indexOf(this.name) === -1) {
               parentValue.push(this.name);
-              parentGroup.$emit('input', parentValue);
+              parent.$emit('input', parentValue);
             }
           } else {
             const index = parentValue.indexOf(this.name);
             /* istanbul ignore else */
             if (index !== -1) {
               parentValue.splice(index, 1);
-              parentGroup.$emit('input', parentValue);
+              parent.$emit('input', parentValue);
             }
           }
         } else {
@@ -96,10 +85,20 @@ export default create({
     },
 
     isDisabled() {
-      return (this.parentGroup && this.parentGroup.disabled) || this.disabled;
+      return (this.parent && this.parent.disabled) || this.disabled;
     }
   },
 
+  watch: {
+    value(val) {
+      this.$emit('change', val);
+    }
+  },
+
+  created() {
+    this.findParent('van-checkbox-group');
+  },
+
   methods: {
     onClick(target) {
       if (!this.isDisabled && !(target === 'label' && this.labelDisabled)) {

packages/collapse-item/index.vue

@@ -32,7 +32,7 @@ export default create({
 
   computed: {
     items() {
-      return this.parentGroup.items;
+      return this.parent.items;
     },
 
     index() {
@@ -44,15 +44,15 @@ export default create({
     },
 
     expanded() {
-      const { activeNames } = this.parentGroup;
-      return this.parentGroup.accordion
-        ? activeNames === this.currentName
-        : activeNames.some(name => name === this.currentName);
+      const { value } = this.parent;
+      return this.parent.accordion
+        ? value === this.currentName
+        : value.some(name => name === this.currentName);
     }
   },
 
   created() {
-    this.findParentByName('van-collapse');
+    this.findParent('van-collapse');
     this.items.push(this);
   },
 
@@ -62,9 +62,9 @@ export default create({
 
   methods: {
     onClick() {
-      const { parentGroup } = this;
-      const name = parentGroup.accordion && this.currentName === parentGroup.activeNames ? '' : this.currentName;
-      this.parentGroup.switch(name, !this.expanded);
+      const { parent } = this;
+      const name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
+      this.parent.switch(name, !this.expanded);
     }
   }
 });

packages/collapse/index.vue

@@ -10,13 +10,9 @@ import create from '../utils/create';
 export default create({
   name: 'collapse',
 
-  model: {
-    prop: 'activeNames'
-  },
-
   props: {
     accordion: Boolean,
-    activeNames: [String, Number, Array]
+    value: [String, Number, Array]
   },
 
   data() {
@@ -27,11 +23,10 @@ export default create({
 
   methods: {
     switch(name, expanded) {
-      const { activeNames } = this;
       if (!this.accordion) {
         name = expanded
-          ? activeNames.concat(name)
-          : activeNames.filter(activeName => activeName !== name);
+          ? this.value.concat(name)
+          : this.value.filter(activeName => activeName !== name);
       }
       this.$emit('change', name);
       this.$emit('input', name);

packages/contact-edit/index.vue

@@ -19,8 +19,8 @@
       />
     </cell-group>
     <div class="van-contact-edit__buttons">
-      <van-button block :loading="isSaving" @click="onSaveContact" type="primary">{{ $t('save') }}</van-button>
-      <van-button block :loading="isDeleting" @click="onDeleteContact" v-if="isEdit">{{ $t('delete') }}</van-button>
+      <van-button block :loading="isSaving" @click="onSave" type="primary">{{ $t('save') }}</van-button>
+      <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button>
     </div>
   </div>
 </template>
@@ -90,13 +90,8 @@ export default create({
       }
     },
 
-    onSaveContact() {
-      const items = [
-        'name',
-        'tel'
-      ];
-
-      const isValid = items.every(item => {
+    onSave() {
+      const isValid = ['name', 'tel'].every(item => {
         const msg = this.getErrorMessageByKey(item);
         if (msg) {
           this.errorInfo[item] = true;
@@ -110,11 +105,8 @@ export default create({
       }
     },
 
-    onDeleteContact() {
-      if (this.isDeleting) {
-        return;
-      }
-
+    onDelete() {
+      if (!this.isDeleting) {
         Dialog.confirm({
           message: this.$t('confirmDelete')
         }).then(() => {
@@ -122,5 +114,6 @@ export default create({
         });
       }
     }
+  }
 });
 </script>

packages/field/index.vue

@@ -146,8 +146,10 @@ export default create({
         }
       }
 
+      if (height) {
         el.style.height = height + 'px';
       }
     }
+  }
 });
 </script>

packages/mixins/find-parent.js

@@ -3,20 +3,22 @@
  */
 
 export default {
+  data() {
+    return {
+      parent: null
+    };
+  },
+
   methods: {
-    findParentByName(name) {
-      if (!this.parentGroup) {
+    findParent(name) {
       let parent = this.$parent;
       while (parent) {
         if (parent.$options.name === name) {
-            this.parentGroup = parent;
+          this.parent = parent;
           break;
         }
         parent = parent.$parent;
       }
     }
-
-      return this.parentGroup;
-    }
   }
 };

packages/radio/index.vue

@@ -36,40 +36,33 @@ export default create({
   },
 
   computed: {
-    isGroup() {
-      return !!this.findParentByName('van-radio-group');
-    },
-
     currentValue: {
       get() {
-        return this.isGroup && this.parentGroup
-          ? this.parentGroup.value
-          : this.value;
+        return this.parent ? this.parent.value : this.value;
       },
 
       set(val) {
-        if (this.isGroup && this.parentGroup) {
-          this.parentGroup.$emit('input', val);
-        } else {
-          this.$emit('input', val);
-        }
+        (this.parent || this).$emit('input', val);
       }
     },
 
     isDisabled() {
-      return this.isGroup && this.parentGroup
-        ? this.parentGroup.disabled || this.disabled
+      return this.parent
+        ? this.parent.disabled || this.disabled
         : this.disabled;
     }
   },
 
+  created() {
+    this.findParent('van-radio-group');
+  },
+
   methods: {
     onClickLabel() {
-      if (this.isDisabled) {
-        return;
-      }
+      if (!this.isDisabled) {
         this.currentValue = this.name;
       }
     }
+  }
 });
 </script>

packages/tab/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-tab__pane" :class="{ 'van-tab__pane--select': index === parentGroup.curActive }">
+  <div class="van-tab__pane" :class="{ 'van-tab__pane--select': index === parent.curActive }">
     <slot />
   </div>
 </template>
@@ -20,17 +20,17 @@ export default create({
 
   computed: {
     index() {
-      return this.parentGroup.tabs.indexOf(this);
+      return this.parent.tabs.indexOf(this);
     }
   },
 
   created() {
-    this.findParentByName('van-tabs');
-    this.parentGroup.tabs.push(this);
+    this.findParent('van-tabs');
+    this.parent.tabs.push(this);
   },
 
   destroyed() {
-    this.parentGroup.tabs.splice(this.index, 1);
+    this.parent.tabs.splice(this.index, 1);
   }
 });
 </script>

packages/vant-css/src/actionsheet.css

@@ -6,11 +6,10 @@
   right: 0;
   bottom: 0;
   color: $text-color;
-  transition: .2s ease-out;
-  background-color: $background-color;
   max-height: 90%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  background-color: $background-color;
 
   &--withtitle {
     background-color: $white;
@@ -56,9 +55,4 @@
       line-height: inherit;
     }
   }
-
-  &-float-enter,
-  &-float-leave-active {
-    transform: translate3d(0, 100%, 0);
-  }
 }

test/specs/actionsheet.spec.js

@@ -14,7 +14,6 @@ describe('ActionSheet', () => {
     });
 
     expect(wrapper.hasClass('van-actionsheet')).to.be.true;
-    expect(wrapper.contains('.van-actionsheet__list')).to.be.true;
     expect(wrapper.instance().actions.length).to.equal(0);
     expect(wrapper.instance().overlay).to.be.true;
     expect(wrapper.instance().closeOnClickOverlay).to.be.true;

test/specs/contact.spec.js

@@ -229,7 +229,7 @@ describe('ContactEdit', () => {
 
     const deleteButton = wrapper.find('.van-button')[1];
     deleteButton.trigger('click');
-    wrapper.vm.onDeleteContact();
+    wrapper.vm.onDelete();
 
     setTimeout(() => {
       wrapper.vm.isDeleting = false;

test/specs/field.spec.js

@@ -69,6 +69,7 @@ describe('Field', () => {
 
   it('create a autosize textarea field', (done) => {
     wrapper = mount(Field, {
+      attachToDocument: true,
       propsData: {
         type: 'textarea',
         autosize: {}
@@ -88,7 +89,6 @@ describe('Field', () => {
     textareaElement.value = longText;
     textarea.trigger('input');
 
-    wrapper.update();
     setTimeout(() => {
       expect(wrapper.find('.van-field__control')[0].element.value).to.equal(longText);
       expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');