浅谈vux的x输入的使用和源代码的解释

前言

在vux中输入最近项目中使用的，以及使用自定义的检查规则和动态匹配错误提示，有时间记录自己的使用体验和源代码分析。希望大家多多指正，在留言区发表宝贵建议。官方文件中常用的几种属性的详细使用列表，代码如下

group ref=' group ' x-input v-model=' name ' class=' vux-input _ _ name ' title=' name ' placeholder='告诉我你的名字' required d : is-type=' check name valid ' @ on-变更的正式文件=' on value change ' div slot=' label ' class=' name _ _ icon ' icon type=' success '/icon/div/x-input/group有详细的说明，需要的属性表示需要这个选项，并且is-type可以绑定一个函数作为检查，这格式如下

check valid(name){ return { valid : name=='三个可爱的新的'，msg: '你不是可爱的新的' } }valid可以设置为你的检查规则，你需要返回一个布尔值。msg是一条错误消息。

vux自己编写了几种验证方法。如果使用电子邮件、中国名和中国移动，可以直接绑定字符串。

Solt槽，如slot='label '，用于自定义标题，源代码如下

插槽名称=' Label ' Label class=' weui-Label ' : class=' Label class ' : style=' { width : Label width | | $ parent . Label width | | Label width computed，textalign : $ parent . Label light，margin right : $ parent . Label margin right } ' v-if=' title ' v-html=' title ' 3360 for=' vux-x-input-$ '

label Class(){ return { ' vux-cell-alignment ' : this。$ parent . label ign===' alignment ' | | this。$家长。$ parent . labelalign===' alignment ' } }

同样的，检查他的父类是否有labelAlign属性，对应vux-cell-align类名的样式不应用。

使用场景

情景1

假设在一个提交页面上，我们提交的时候，判断输入框中的值是否符合我们的要求，如果不符合，给出错误提示，如果符合，清空输入框中的数据。

需求：

如果这个页面上还有停留，我们需要清空上次的所有数据

问题：

我们需要初始化该值，但是我们会发现，如果我们设置了required，验证仍然会触发。如何清数据清支票？

变通方法：

文档显示重置可以重置输入框值并清除错误信息

用法：

绑定引用x输入外层的组标签来访问子组件。因此，我们可以通过这个获得输入组件集合。$refs.group.$children，并使用组件中定义的重置方法

如果项目中已经安装了vux，可以通过将Search node_modules安装为vux/src/components/x-input/index . vue文件，在node_modules文件夹中找到VUX安装包路径。重置方法的源代码如下：

重置(值=' '){此。dirty=false this。currentvalue=valuethis。firsterror='' this。valid=true}当我们单击提交按钮时，代码如下

onSubmitClick() { if(！这个。无效){this。参考文献。团体。孩子。foreach (child={child。reset()})} else {//显示提示this.isShowToast=true}我以为它会清除数据，没想到点击按钮后数据被清除了，但还是显示了一个错误图标。

你可以通过vue-devtools看到

有效值为假。查看vux源代码涉及如下有效代码

validate() { //.省略与本次无关的校验方法if(！这个。当前值。必选){ this。valid=false this。错误。必需='必填哦this.getError()返回如果(这个。IsTYPe==' function '){/*取出自定义函数中的校验结果是一个布尔检查名称有效（名称){返回{ valid:名称==='三只萌新，msg: '你不是萌新} } */const有效状态=this。istype(这。currentvalue)这个。有效=有效状态。有效if(！this.valid) { //如果校验值无效将自定义校验的味精赋值给错误对象下的格式化这个。错误。format=validstatus。味精这个。forceshowerror=true。geterror()返回} else {//如果校验值有效则将错误对象下的格式删除删除this.errors.format } //如果都符合将有效的赋值为有效this.valid=true } }验证函数校验当前是否有值，是否为必填，如果当前值的校验方式是函数，将校验结果赋值给有效。如果有效的是错误的则将自定义的味精统一存储在错误对象下，错误是用来存储不同类型的错误信息。然后执行getError函数

getError(){ let key=object。钥匙(这个。错误)[0]这。第一个错误=这个。错误[键]控制台。记录('第一个错误'这个。第一个错误)}对象。钥匙(这个。错误)返回错误对象下的所有可枚举属性，并且取第一个作为键名，取出对于的值赋值给第一个错误，第一个错误是提示框文字

toast v-model=' showErrorToast ' type=' text ' width=' auto ' : time=' 600 ' { first error } }/toast当点击错误图标判断是否有第一个错误，应该到错误未传入值默认为没错，点击时如果有效校验为错误时会触发getError函数将错误提示赋值给第一个错误，所以会将拳头错误对应的提示信息显示出来。而图标的显示与否与有效的有关，其中一个条件是有效的为错误的时才会显示。

图标@点击。native=' OnClickErroricon ' class=' vux-input-icon ' type=' warn ' : title='！有效吗？第一个错误： ' ' ' v-show=' show warn '/图标shadowtoasterror : { type :布尔值，默认值为： true } show warn(){ return(！这个。novalidate！这个。等于！这个。这个有效。第一个错误(这。触摸| |这个。forceshowerror()} OnClickErroricon(){ if(this。应该避免这种情况。第一个错误){这。showerrorthost=true }这一点.$emit('点击错误图标，this.firstError) }分析了上面的代码，为什么执行了重置方法后，校验报错还是在，原因是有效的依然还是假的，导致显示警告返回值是是的，而重置中方法中明明将有效的设置为真实的了，为什么最后结果为假的。

watch:{ currentValue(newVal，旧val){ if(new val this。等于){ if(新val。长度===这个。等同于。长度){这个。haslengtqual=true }这一点。validateequal()} else { this。validate()} }因为监听了投入绑定当前值的值，当重置方法执行的时候this.currentValue=' '触发了变动执行生效方法，导致再次给这个有效赋值假的。

该如何解决这个问题，问题发生的原因是当前值发生变化导致触发生效方法校验，所以我们只要当执行重置方法后不触发当前值改变就可以不触发生效方法校验

方法一：

onSubmitClick() { this .参考文献。团体。孩子。foreach(child={//这次重置是将当前值全部置为' ' child.reset() })此$nextTick(()={ //当所以投入的值都置为空后在此执行重置方法，这次前后当前值没有发生变化不会触发生效校验所以有效为真实的不会导致图标出现这个参考文献。团体。孩子。foreach(child={ child。reset()})})方法二： 其实想做的就是在重置方法执行之前将当前值置为空

created(){ this . currentvalue=this . value===undefined | | this . value===null？这个面具？this . mask value(this . value): this . value }，prop : { value :[String，Number]}，Watch: {value (val) {this。currentValue=val}}可以通过传入值来改变currentValue的值，将v-model='name '绑定值的方式改为：value='name '

Onsubmitclick () {this。name='' this。$ nexttick (()={this。参考文献。团体。孩子。foreach (child={child。reset ()})}))场景2

当我们单击提交时，如果有任何不符合规则的验证选项，我们可以提示匹配的警告

Data(){ return {message: '信息未填写' }}设置信息提示信息的初始值为信息未填写，当我们未填写信息时，点击提交显示。然后使用on-change功能绑定检查规则，实时更新消息对应的提示。业务逻辑如下：

OnValueChange() {//使用变量const children=this的赋值。$ refs . group . $ children let status list=[]//来筛选出这些值。作为判断是否全部没有填写的依据，如果长度小于1，说明没有填写。状态列表=孩子。过滤器(项目={返回项目。currentvalue}) if(状态列表。length1) {this.message='信息未填写' return} //查找第一个没有值的项，返回undefined const first invalid=children。find (item={return！item.valid }) if (firstInvalid！==undefined) {this.message=`请填写正确的${firstInvalid.title}`} //显示是否分配有效值以增加代码的可读性。这个。valid=boolean(first invalid)} github:代码地址

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