x-input怎么在vux項(xiàng)目中使用

這篇文章將為大家詳細(xì)講解有關(guān)x-input怎么在vux項(xiàng)目中使用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

<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>

官方文檔有詳細(xì)的解釋， required 屬性表示此選項(xiàng)為必填， is-type 可以綁定一個函數(shù)，作為校驗(yàn)，這個函數(shù)得返回一個對象。格式如下

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

valid可以設(shè)置為你的校驗(yàn)規(guī)則，需要返回一個布爾值，msg是錯誤的提示信息。

vux本身寫好幾種校驗(yàn)方式，如果使用 email,china-name,china-mobile 這幾種方式直接綁定字符串即可。

solt插槽如slot="label"用于自定義title,源碼如下

<slot name="label">
 <label class="weui-label"
  :class="labelClass"
  :
  v-if="title"
  v-html="title"
  :for="`vux-x-input-${uuid}`"></label>
 <inline-desc v-if="inlineDesc">{{ inlineDesc }}</inline-desc>
 </slot>

分析:class="labelClass"動態(tài)綁定樣式以對象的形式返回一個{[className]:Boolean}的格式的對象

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

同樣的方式查看他父級是否有l(wèi)abelAlign屬性，vux-cell-justify類名對應(yīng)的樣式?jīng)]有應(yīng)用。

使用場景

場景1

假設(shè)在一個提交頁面，當(dāng)我們提交時(shí)判斷輸入框中的值是否是符合我們的要求，如果不符合，給出錯誤提示，如果符合提交后將輸入框中的數(shù)據(jù)清空。

需求:

如果還有停留在本頁面我們需要將上一次的數(shù)據(jù)全部清空

問題:

我們需要初始化值，但是會發(fā)現(xiàn)如果我們設(shè)置了required后校驗(yàn)還是會觸發(fā)。如何讓數(shù)據(jù)清空并且讓校驗(yàn)也清空。

解決方法:

文檔中寫了reset可以重置輸入框值，清除錯誤信息

使用方式：

在x-input外層的group標(biāo)簽上綁定ref來訪問子組件。因此我們可以通過 this.$refs.group.$children獲取到input組件集合并且可以使用組件中定義的reset方法

如果你的項(xiàng)目中已經(jīng)安裝了vux可以通過安裝Search node_modules查找node_modules文件夾中vux安裝包路徑為 vux/src/components/x-input/index.vue 文件 reset方法源碼如下:

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

回到我們的業(yè)務(wù)邏輯中當(dāng)我們點(diǎn)擊提交按鈕時(shí)代碼如下

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

本以為這樣就可以清空數(shù)據(jù)了，沒想到點(diǎn)擊按鈕時(shí)數(shù)據(jù)是清空了，但是還是有報(bào)錯圖標(biāo)顯示。

通過 vue-devtools可以看到

valid的值為false查看vux源碼查看涉及到valid代碼如下

validate() {
 // ...省略與本次無關(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é)果 是一個Boolean
   checkNameValid(name) {
   return {
    valid: name === '三只萌新',
    msg: '你不是萌新'
   }
   }
  */
  const validStatus = this.isType(this.currentValue)
  this.valid = validStatus.valid
  if (!this.valid) {
  // 如果校驗(yàn)值無效將自定義校驗(yàn)的msg賦值給errors對象下的format
   this.errors.format = validStatus.msg
   this.forceShowError = true
   this.getError()
   return
  } else {
  // 如果校驗(yàn)值有效則將error對象下的format刪除 
   delete this.errors.format
  }
  // 如果都符合將valid賦值為有效
  this.valid = true
 }
}

validate函數(shù)校驗(yàn)當(dāng)前是否有值，是否為必填， 如果當(dāng)前值的校驗(yàn)方式是函數(shù)，將校驗(yàn)結(jié)果賦值給valid 。如果valid是false則將自定義的msg統(tǒng)一存儲在errors對象下， errors是用來存儲不同類型的錯誤信息 。 然后執(zhí)行g(shù)etError函數(shù)

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

Object.keys(this.errors)返回errors對象下的所有可枚舉屬性，并且取第一個作為鍵名，取出對于的值賦值給firstError ,firstError是提示框文字

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

當(dāng)點(diǎn)擊錯誤圖標(biāo)判斷是否有firstError，shouldToastError未傳入值默認(rèn)為true，點(diǎn)擊時(shí)如果valide校驗(yàn)為錯誤時(shí)會觸發(fā)getError函數(shù)將錯誤提示賦值給firstError，所以會將fistError對應(yīng)的提示信息顯示出來。而圖標(biāo)的顯示與否與valid有關(guān),其中一個條件是valid為false時(shí)才會顯示。

 <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)
 }

分析了上面的代碼，為什么執(zhí)行了reset方法后，校驗(yàn)報(bào)錯還是在，原因是valid依然還是false，導(dǎo)致showWarn返回值是ture，而reset中方法中明明將valid設(shè)置為true了，為什么最后結(jié)果為false。

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

因?yàn)楸O(jiān)聽了input綁定currentValue的值，當(dāng)reset方法執(zhí)行的時(shí)候this.currentValue = ' ' 觸發(fā)了變動執(zhí)行validate方法，導(dǎo)致再次給this.valid賦值false。

該如何解決這個問題，問題發(fā)生的原因是currentValue發(fā)生變化導(dǎo)致觸發(fā)validate方法校驗(yàn)，所以我們只要當(dāng)執(zhí)行reset方法后不觸發(fā)currentValue改變就可以不觸發(fā)validate方法校驗(yàn)

方法一:

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

方法二: 其實(shí)想做的就是在reset方法執(zhí)行之前將currentValue置為空

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
 }
}

可以通過傳入value來改變currentValue的值，將v-model="name"綁定值的方式改為:value="name"

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

場景2

當(dāng)我們點(diǎn)擊提交時(shí),如果有校驗(yàn)選項(xiàng)不符合規(guī)則能提示相匹配的警告

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

將message提示信息初始值設(shè)置為還未填寫信息，當(dāng)我們未進(jìn)行填寫信息的時(shí)候點(diǎn)擊提交顯示。然后使用on-change函數(shù)綁定校驗(yàn)規(guī)則，實(shí)時(shí)更新message對應(yīng)的提示語，業(yè)務(wù)邏輯如下：

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

關(guān)于x-input怎么在vux項(xiàng)目中使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。