<group ref="group">
  <x-input v-model="name"
  class="vux-input__name"
  title="名字"
  placeholder="tell me your name"
  required
  :is-type="checkNameValid"
  @on-change="onValueChange">
  <div slot="label"
   class="name__icon">
   <icon type="success"></icon>
  </div>
  </x-input>
 </group>

checkValid(name) {
  return {
  valid: name === '三只萌新',
  msg: '你不是萌新'
  }
 }

<slot name="label">
 <label class="weui-label"
  :class="labelClass"
  :style="{width: labelWidth || $parent.labelWidth || labelWidthComputed, textAlign: $parent.labelAlign, marginRight: $parent.labelMarginRight}"
  v-if="title"
  v-html="title"
  :for="`vux-x-input-${uuid}`"></label>
 <inline-desc v-if="inlineDesc">{{ inlineDesc }}</inline-desc>
 </slot>

labelClass() {
  return {
  'vux-cell-justify':
   this.$parent.labelAlign === 'justify' ||
   this.$parent.$parent.labelAlign === 'justify'
  }
 }

reset(value = '') {
  this.dirty = false
  this.currentValue = value
  this.firstError = ''
  this.valid = true
 }

onSubmitClick() {
  if (!this.isInvalid) {
  this.$refs.group.$children.forEach(child => {
   child.reset()
  })
  } else {
  // 展示提示信息
  this.isShowToast = true
  }

validate() {
 // ...省略與本次無(wú)關(guān)的校驗(yàn)方法
if (!this.currentValue && this.required) {
  this.valid = false
  this.errors.required = '必填哦'
  this.getError()
  return
  if (typeof this.isType === 'function') {
  /* 
   取出自定義函數(shù)中的校驗(yàn)結(jié)果 是一個(gè)Boolean
   checkNameValid(name) {
   return {
    valid: name === '三只萌新',
    msg: '你不是萌新'
   }
   }
  */
  const validStatus = this.isType(this.currentValue)
  this.valid = validStatus.valid
  if (!this.valid) {
  // 如果校驗(yàn)值無(wú)效將自定義校驗(yàn)的msg賦值給errors對(duì)象下的format
   this.errors.format = validStatus.msg
   this.forceShowError = true
   this.getError()
   return
  } else {
  // 如果校驗(yàn)值有效則將error對(duì)象下的format刪除 
   delete this.errors.format
  }
  // 如果都符合將valid賦值為有效
  this.valid = true
 }
}

getError() {
  let key = Object.keys(this.errors)[0]
  this.firstError = this.errors[key]
  console.log('firstError' + this.firstError)
 }

 <toast v-model="showErrorToast"
  type="text"
  width="auto"
  :time="600">{{ firstError }}</toast>

 <icon @click.native="onClickErrorIcon"
  class="vux-input-icon"
  type="warn"
  :title="!valid ? firstError : ''"
  v-show="showWarn"></icon>
  
 shouldToastError: {
  type: Boolean,
  default: true
 }
 showWarn() {
  return (
  !this.novalidate &&
  !this.equalWith &&
  !this.valid &&
  this.firstError &&
  (this.touched || this.forceShowError)
  )
 }
 onClickErrorIcon() {
  if (this.shouldToastError && this.firstError) {
  this.showErrorToast = true
  }
  this.$emit('on-click-error-icon', this.firstError)
 }

watch:{
  currentValue(newVal, oldVal) {
   if (newVal && this.equalWith) {
   if (newVal.length === this.equalWith.length) {
    this.hasLengthEqual = true
   }
   this.validateEqual()
   } else {
   this.validate()
   }
  }
}

onSubmitClick() {
 this.$refs.group.$children.forEach(child => {
  // 這次reset是將currentValue全部置為""
  child.reset()
 })
 this.$nextTick(() => {
 // 當(dāng)所以input的值都置為空后在此執(zhí)行reset方法，這次前后currentValue沒(méi)有發(fā)生變化不會(huì)觸發(fā)validate校驗(yàn)所以valide為true不會(huì)導(dǎo)致圖標(biāo)出現(xiàn)
  this.$refs.group.$children.forEach(child => {
  child.reset()
  })
 })
}

created(){
 this.currentValue =
  this.value === undefined || this.value === null
  ? ''
  : this.mask ? this.maskValue(this.value) : this.value
},
props:{
 value: [String, Number]
},
watch:{
 value(val) {
  this.currentValue = val
 }
}

onSubmitClick() {
 this.name = ''
 this.$nextTick(() => {
  this.$refs.group.$children.forEach(child => {
  child.reset()
  })
 })
}

data(){
 return {
  message: '還未填寫(xiě)信息'
 }
}

 onValueChange() {
  // 多次使用賦值給變量
  const children = this.$refs.group.$children
  let statusList = []
  // 篩選出有值的，作為是否全部未填的判斷依據(jù) 如果length小于1則還沒(méi)填寫(xiě)任何內(nèi)容
  statusList = children.filter(item => {
  return item.currentValue
  })
  if (statusList.length < 1) {
  this.message = '還未填寫(xiě)信息'
  return
  }
  // 找到第一個(gè)沒(méi)有值的那一項(xiàng)，如果都有則返回undefined
  const firstInvalid = children.find(item => {
  return !item.valid
  })
  if (firstInvalid !== undefined) {
  this.message = `請(qǐng)?zhí)顚?xiě)正確的${firstInvalid.title}`
  }
  // 顯示的將是否有效賦值給valid增加代碼可讀性
  this.valid = Boolean(firstInvalid)
 }