x-input: toast error when clicking error icon (close #2009)

airyland · Sep 21, 2017 · 445e896 · 445e896
1 parent 4bd49b3
commit 445e896
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/src/components/x-input/index.vue b/src/components/x-input/index.vue
@@ -119,21 +119,29 @@
     <div class="weui-cell__ft">
       <icon type="clear" v-show="!equalWith && showClear && currentValue && !readonly && !disabled" @click.native="clear"></icon>
 
-      <icon class="vux-input-icon" type="warn" :title="!valid ? firstError : ''" v-show="showWarn"></icon>
-      <icon class="vux-input-icon" type="warn" v-if="!novalidate && hasLengthEqual && dirty && equalWith && !valid"></icon>
+      <icon @click.native="onClickErrorIcon" class="vux-input-icon" type="warn" :title="!valid ? firstError : ''" v-show="showWarn"></icon>
+      <icon @click.native="onClickErrorIcon" class="vux-input-icon" type="warn" v-if="!novalidate && hasLengthEqual && dirty && equalWith && !valid"></icon>
+
       <icon type="success" v-show="!novalidate && equalWith && equalWith === currentValue && valid"></icon>
 
       <icon type="success" class="vux-input-icon" v-show="novalidate && iconType === 'success'"></icon>
       <icon type="warn" class="vux-input-icon" v-show="novalidate && iconType === 'error'"></icon>
 
       <slot name="right"></slot>
     </div>
+
+    <toast
+    v-model="showErrorToast"
+    type="text"
+    width="auto"
+    :time="600">{{ firstError }}</toast>
   </div>
 </template>
 
 <script>
 import Base from '../../libs/base'
 import Icon from '../icon'
+import Toast from '../toast'
 import InlineDesc from '../inline-desc'
 
 import isEmail from 'validator/lib/isEmail'
@@ -195,7 +203,8 @@ export default {
   mixins: [Base],
   components: {
     Icon,
-    InlineDesc
+    InlineDesc,
+    Toast
   },
   props: {
     title: {
@@ -247,7 +256,11 @@ export default {
     debounce: Number,
     placeholderAlign: String,
     labelWidth: String,
-    mask: String
+    mask: String,
+    shouldToastError: {
+      type: Boolean,
+      default: true
+    }
   },
   computed: {
     labelStyles () {
@@ -288,6 +301,12 @@ export default {
     }
   },
   methods: {
+    onClickErrorIcon () {
+      if (this.shouldToastError && this.firstError) {
+        this.showErrorToast = true
+      }
+      this.$emit('on-click-error-icon', this.firstError)
+    },
     maskValue (val) {
       const val1 = this.mask ? mask.toPattern(val, this.mask) : val
       return val1
@@ -431,7 +450,8 @@ export default {
       forceShowError: false,
       hasLengthEqual: false,
       valid: true,
-      currentValue: ''
+      currentValue: '',
+      showErrorToast: false
     }
     return data
   },

diff --git a/src/components/x-input/metas.yml b/src/components/x-input/metas.yml
@@ -95,6 +95,11 @@ props:
     version: v2.6.1
     en: (beta) value mask, 9 for DIGIT, A for ALPHA, S for ALPHA AND DIGIT
     zh-CN: (beta) 值格式化，依赖于 vanilla-masker，其中 9 表示数字，A 表示大写字母，S 表示数字或者字母
+  should-toast-error:
+    version: next
+    default: true
+    en: whether toast error when clicking on error icon
+    zh-CN: 是否在点击错误图标时用 toast 的形式显示错误
 slots:
   label:
     zh-CN: '用于自定义`label`(即 title)部分内容，比如使用`icon`'
@@ -115,6 +120,11 @@ events:
   on-change:
     params: '`(value)`'
     zh-CN: '输入值变化时触发。如果你使用了`debounce`，那么触发将不会是实时的。'
+  on-click-error-icon:
+    version: next
+    params: '`(error)`'
+    en: fires when clicking error icon
+    zh-CN: '点击错误图标时触发，你可以关闭 `should-toast-error` 然后用这个事件来自定义显示错误的提示内容'
 methods:
   focus:
     en: get input focus
@@ -128,6 +138,11 @@ methods:
     en: reset input value and clear errors
     zh-CN: 重置输入框值，清除错误信息
 changes:
+  next:
+    en:
+      - '[enhance] toast error when clicking error icon #2009'
+    zh-CN:
+      - '[enhance] 点击错误图标时显示错误内容 #2009'
   v2.6.1:
     en:
       - '[enhance] set label for attribute #1983'