vux 显示 html,浅谈vux之x-input使用以及源码解读

本是古典何须时尚 2022-10-09 05:57 408阅读 0赞

前言

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

class="vux-input\_\_name"

title="名字"

placeholder="tell me your name"

required

:is-type="checkNameValid"

@on-change="onValueChange">

class="name\_\_icon">

官方文档有详细的解释， required 属性表示此选项为必填， is-type 可以绑定一个函数，作为校验，这个函数得返回一个对象。格式如下

checkValid(name) \{

return \{

valid: name === '三只萌新',

msg: '你不是萌新'

valid可以设置为你的校验规则，需要返回一个布尔值，msg是错误的提示信息。

vux本身写好几种校验方式，如果使用 email,china-name,china-mobile 这几种方式直接绑定字符串即可。

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

: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\}\`">

\{ \{ inlineDesc \}\}

分析:class="labelClass"动态绑定样式以对象的形式返回一个\{\[className\]:Boolean\}的格式的对象

labelClass() \{

return \{

'vux-cell-justify':

this.$parent.labelAlign === 'justify' ||

this.$parent.$parent.labelAlign === 'justify'

![424db3308ad278c600cf0a2c2881e3b8.png][]

同样的方式查看他父级是否有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

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

![049c627a18c3ce41fee99f437102ebf3.png][]

![f047a165025fa3fa24880a49d7b91d2b.png][]

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是提示框文字

type="text"

width="auto"

:time="600">\{ \{ firstError \}\}

当点击错误图标判断是否有firstError，shouldToastError未传入值默认为true，点击时如果valide校验为错误时会触发getError函数将错误提示赋值给firstError，所以会将fistError对应的提示信息显示出来。而图标的显示与否与valid有关,其中一个条件是valid为false时才会显示。

class="vux-input-icon"

type="warn"

:title="!valid ? firstError : ''"

v-show="showWarn">

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：代码地址

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

[424db3308ad278c600cf0a2c2881e3b8.png]: /images/20221005/7bbe646061734c5cb142a1e2b4c6ad18.png
[049c627a18c3ce41fee99f437102ebf3.png]: /images/20221005/35cf42349a814ddbb736417212456784.png
[f047a165025fa3fa24880a49d7b91d2b.png]: /images/20221005/d4868377a1a34ba8af8630fdba265dd4.png