fix: input-item slot render error (didi#368)

* fix(input-item): remove prop key when use error slot * fix: input-item slot render error
Florenza · Mar 21, 2019 · 83ea19c · 83ea19c
1 parent c0b1895
commit 83ea19c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 14 deletions.
diff --git a/components/input-item/demo/cases/demo5.vue b/components/input-item/demo/cases/demo5.vue
@@ -12,7 +12,6 @@
         type="bankCard"
         title="储蓄卡号"
         v-model="bankCardNo"
-        :key="bankCardKey"
         clearable
         @blur="checkBankCard"
       >
@@ -43,7 +42,6 @@ export default {
   data() {
     return {
       bankCardNo: '',
-      bankCardKey: Date.now(),
       isError: false,
     }
   },
@@ -54,7 +52,6 @@ export default {
       } else {
         this.isError = false
       }
-      this.bankCardKey = Date.now()
     },
     bankCardTip() {
       Dialog.alert({

diff --git a/components/input-item/index.vue b/components/input-item/index.vue
@@ -6,8 +6,8 @@
       isTitleLatent ? 'is-title-latent' : '',
       isInputActive ? 'is-active' : '',
       isInputFocus ? 'is-focus' : '',
-      isInputError ? 'is-error' : '',
-      isInputBrief ? 'with-brief' : '',
+      isInputError() ? 'is-error' : '',
+      isInputBrief() && !isInputError() ? 'with-brief' : '',
       isDisabled ? 'is-disabled': '',
       isAmount ? 'is-amount': '',
       clearable ? 'is-clear' : '',
@@ -86,14 +86,14 @@
       <!-- BRIEF/ERROR TIP -->
       <!-- -------------------- -->
       <div
-        v-if="isInputError"
+        v-if="isInputError()"
         class="md-input-item-msg"
       >
         <p v-if="error !== ''" v-text="error"></p>
         <slot name="error" v-else></slot>
       </div>
       <div
-        v-if="isInputBrief"
+        v-if="isInputBrief() && !isInputError()"
         class="md-input-item-brief"
       >
         <p v-if="brief !== ''" v-text="brief"></p>
@@ -279,12 +279,6 @@ export default {
     isInputEmpty() {
       return !this.inputValue.length
     },
-    isInputError() {
-      return this.$slots.error || this.error !== ''
-    },
-    isInputBrief() {
-      return (this.$slots.brief || this.brief !== '') && !this.isInputError
-    },
     isDisabled() {
       return this.rootField.disabled || this.disabled
     },
@@ -316,7 +310,6 @@ export default {
       }
     },
   },
-
   created() {
     this.inputValue = this.$_formateValue(this.$_subValue(this.value + '')).value
   },
@@ -397,6 +390,12 @@ export default {
 
       return formateValue
     },
+    isInputError() {
+      return this.$slots.error || this.error !== ''
+    },
+    isInputBrief() {
+      return this.$slots.brief || this.brief !== ''
+    },
     $_trimValue(val) {
       return trimValue(val, '\\s|,')
     },

diff --git a/components/input-item/test/index.spec.js b/components/input-item/test/index.spec.js
@@ -128,4 +128,41 @@ describe('InputItem - Operation', () => {
 
     input.trigger('click')
   })
+
+  test('should show error slot', async () => {
+    wrapper = mount({
+      template: `
+        <md-input-item
+          type="bankCard"
+          title="label">
+          <p
+            v-if="isError"
+            class="error"
+            slot="error">
+            errorMsg
+          </p>
+        </md-input-item>
+      `,
+      components: {
+        [InputItem.name]: InputItem,
+      },
+      data() {
+        return {
+          isError: false,
+        }
+      },
+    })
+
+    expect(wrapper.contains('.md-input-item-msg')).toBe(false)
+    wrapper.vm.isError = true
+    await wrapper.vm.$nextTick(() => {
+      expect(wrapper.contains('.md-input-item-msg')).toBe(true)
+      expect(wrapper.find('.md-input-item-msg').text()).toBe('errorMsg')
+    })
+
+    wrapper.vm.isError = false
+    await wrapper.vm.$nextTick(() => {
+      expect(wrapper.contains('.md-input-item-msg')).toBe(false)
+    })
+  })
 })