x-input怎么在vux项目中使用(vux,web开发)

时间:2024-03-29 04:18:44 作者 : 石家庄SEO 分类 : web开发
  • TAG :
<groupref="group"><x-inputv-model="name"class="vux-input__name"title="名字"placeholder="tellmeyourname"required:is-type="checkNameValid"@on-change="onValueChange"><divslot="label"class="name__icon"><icontype="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,源码如下

<slotname="label"><labelclass="weui-label":class="labelClass":v-if="title"v-html="title":for="`vux-x-input-${uuid}`"></label><inline-descv-if="inlineDesc">{{inlineDesc}}</inline-desc></slot>

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

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

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

同样的方式查看他父级是否有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=falsethis.currentValue=valuethis.firstError=''this.valid=true}

回到我们的业务逻辑中当我们点击提交按钮时代码如下

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

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

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

通过 vue-devtools可以看到

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

valid的值为false查看vux源码查看涉及到valid代码如下

validate(){//...省略与本次无关的校验方法if(!this.currentValue&&this.required){this.valid=falsethis.errors.required='必填哦'this.getError()returnif(typeofthis.isType==='function'){/*取出自定义函数中的校验结果是一个BooleancheckNameValid(name){return{valid:name==='三只萌新',msg:'你不是萌新'}}*/constvalidStatus=this.isType(this.currentValue)this.valid=validStatus.validif(!this.valid){//如果校验值无效将自定义校验的msg赋值给errors对象下的formatthis.errors.format=validStatus.msgthis.forceShowError=truethis.getError()return}else{//如果校验值有效则将error对象下的format删除deletethis.errors.format}//如果都符合将valid赋值为有效this.valid=true}}

validate函数校验当前是否有值,是否为必填, 如果当前值的校验方式是函数,将校验结果赋值给valid 。如果valid是false则将自定义的msg统一存储在errors对象下, errors是用来存储不同类型的错误信息 。 然后执行getError函数

getError(){letkey=Object.keys(this.errors)[0]this.firstError=this.errors[key]console.log('firstError'+this.firstError)}

Object.keys(this.errors)返回errors对象下的所有可枚举属性,并且取第一个作为键名,取出对于的值赋值给firstError ,firstError是提示框文字

<toastv-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(){//多次使用赋值给变量constchildren=this.$refs.group.$childrenletstatusList=[]//筛选出有值的,作为是否全部未填的判断依据如果length小于1则还没填写任何内容statusList=children.filter(item=>{returnitem.currentValue})if(statusList.length<1){this.message='还未填写信息'return}//找到第一个没有值的那一项,如果都有则返回undefinedconstfirstInvalid=children.find(item=>{return!item.valid})if(firstInvalid!==undefined){this.message=`请填写正确的${firstInvalid.title}`}//显示的将是否有效赋值给valid增加代码可读性this.valid=Boolean(firstInvalid)}
 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:x-input怎么在vux项目中使用的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:微信小程序实现底部导航下一篇:

6 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18