浅谈vux之x-input使用以及源码解读

前言

近期项目中使用的vux中的input，以及使用自定义校验规则和动态匹配错误提示，有时间记录下自己的使用经历和源码分析。希望大家多多指正，留言区发表自己宝贵的建议。 详解 列举官方文档中常用的几个属性的使用方法，代码如下

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

分析: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
  }

本以为这样就可以清空数据了，没想到点击按钮时数据是清空了，但是还是有报错图标显示。

 

通过 可以看到

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

github：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。