x-input怎么在vux項目中使用

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

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

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

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

valid可以設置為你的校驗規則，需要返回一個布爾值，msg是錯誤的提示信息。

vux本身寫好幾種校驗方式，如果使用 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"動態綁定樣式以對象的形式返回一個{[className]:Boolean}的格式的對象

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

同樣的方式查看他父級是否有labelAlign屬性，vux-cell-justify類名對應的樣式沒有應用。

使用場景

場景1

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

需求:

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

問題:

我們需要初始化值，但是會發現如果我們設置了required后校驗還是會觸發。如何讓數據清空并且讓校驗也清空。

解決方法:

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

使用方式：

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

如果你的項目中已經安裝了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
 }

回到我們的業務邏輯中當我們點擊提交按鈕時代碼如下

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

本以為這樣就可以清空數據了，沒想到點擊按鈕時數據是清空了，但是還是有報錯圖標顯示。

通過 vue-devtools可以看到

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

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

validate函數校驗當前是否有值，是否為必填， 如果當前值的校驗方式是函數，將校驗結果賦值給valid 。如果valid是false則將自定義的msg統一存儲在errors對象下， errors是用來存儲不同類型的錯誤信息 。 然后執行getError函數

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>

當點擊錯誤圖標判斷是否有firstError，shouldToastError未傳入值默認為true，點擊時如果valide校驗為錯誤時會觸發getError函數將錯誤提示賦值給firstError，所以會將fistError對應的提示信息顯示出來。而圖標的顯示與否與valid有關,其中一個條件是valid為false時才會顯示。

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

分析了上面的代碼，為什么執行了reset方法后，校驗報錯還是在，原因是valid依然還是false，導致showWarn返回值是ture，而reset中方法中明明將valid設置為true了，為什么最后結果為false。

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

因為監聽了input綁定currentValue的值，當reset方法執行的時候this.currentValue = ' ' 觸發了變動執行validate方法，導致再次給this.valid賦值false。

該如何解決這個問題，問題發生的原因是currentValue發生變化導致觸發validate方法校驗，所以我們只要當執行reset方法后不觸發currentValue改變就可以不觸發validate方法校驗

方法一:

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

方法二: 其實想做的就是在reset方法執行之前將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

當我們點擊提交時,如果有校驗選項不符合規則能提示相匹配的警告

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

將message提示信息初始值設置為還未填寫信息，當我們未進行填寫信息的時候點擊提交顯示。然后使用on-change函數綁定校驗規則，實時更新message對應的提示語，業務邏輯如下：

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

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