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


Posted in Javascript onNovember 04, 2018

前言

近期项目中使用的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'
  }
 }

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

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

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

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

通过 vue-devtools可以看到

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
微信小程序实现登录注册tab切换效果
Dec 29 #Javascript
原生js实现淘宝放大镜效果
Oct 28 #Javascript
微信小程序如何获取手机验证码
Nov 04 #Javascript
微信小程序实现弹出层效果
May 26 #Javascript
You might like
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php变量作用域的深入解析
2013/06/03 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
CI框架表单验证实例详解
2016/11/21 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
python实现批量下载新浪博客的方法
2015/06/15 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Django单元测试工具test client使用详解
2019/08/02 Python
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
给上级领导的感谢信
2015/01/22 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
Python实现单例模式的5种方法
2021/06/15 Python