input使用以及源码解读(2)

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

<icon @click.native="onClickErrorIcon" 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：代码地址