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

前言

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

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

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

通过 vue-devtools可以看到

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

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

(0)

相关推荐

  • vue.js input框之间赋值方法

    如下所示: demo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> </head> <body> <form action="" id="demo"> <input type="text" va

  • vue判断input输入内容全是空格的方法

    比如input中的数据和data中的msg双向绑定. 那么我们可以  判断先把msg以空格拆分成数组,然后拼接起来,判断字符串的长度,如果长度为0,证明输入的就全是空格了,如下: msg.split(" ").join("").length = 0 以上这篇vue判断input输入内容全是空格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue获取input输入值的问题解决办法 详解.vue文件中监听in

  • vue input输入框模糊查询的示例代码

    Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo

  • vuejs 动态添加input框的实例讲解

    实例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="front" val

  • vue监听input标签的value值方法

    由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法 /*模糊搜索*/

  • vue input 输入校验字母数字组合且长度小于30的实现代码

    下面一段代码给大家分享vue input 校验字母数字组合且长度小于30,具体代码如下所示: <Input v-model="form.glhm" placeholder="请输入关联交易号" style="width:240px" @on-blur="validateJyh(form.glhm)"></Input> validateJyh(glhm){//校验关联交易号 var reg = /^[A-

  • Vue通过input筛选数据

    本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&

  • Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • 浅谈Vuejs中nextTick()异步更新队列源码解析

    vue官网关于此解释说明如下: vue2.0里面的深入响应式原理的异步更新队列 官网说明如下: 只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会一次推入到队列中.这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要.然后,在下一个的事件循环"tick"中,Vue 刷新队列并执行实际(已去重的)工作.Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MutationOb

  • 浅谈Python用QQ邮箱发送邮件时授权码的问题

    QQ邮箱最新推出了一个授权码,需已验证的手机号向QQ邮箱服务器发送一条短信获得.该授权码用于第三方客户端登录,代替了第三方登录时使用的个人邮箱密码. 在测试过程中遇到两个问题: 1.提示需建立SSL安全连接.于是将smtplib.SMTP() 改成了smtplib.SMTP_SSL() 2.运行代码后,程序一直运行,但没有任何反应,等了五分钟左右,最后只好ctrl+c停止.查原因才知道,QQ邮箱的SMTP服务端口不是默认的25.改为465之后就好了. (使用标准的25端口连接SMTP服务器时,使

  • 浅谈ASP.NET Core静态文件处理源码探究

    前言 静态文件(如 HTML.CSS.图像和 JavaScript)等是Web程序的重要组成部分.传统的ASP.NET项目一般都是部署在IIS上,IIS是一个功能非常强大的服务器平台,可以直接处理接收到的静态文件处理而不需要经过应用程序池处理,所以很多情况下对于静态文件的处理程序本身是无感知的.ASP.NET Core则不同,作为Server的Kestrel服务是宿主到程序上的,由宿主运行程序启动Server然后可以监听请求,所以通过程序我们直接可以处理静态文件相关.静态文件默认存储到项目的ww

  • 浅谈SpringMVC请求映射handler源码解读

    请求映射源码 首先看一张请求完整流转图(这里感谢博客园上这位大神的图,博客地址我忘记了): 前台发送给后台的访问请求是如何找到对应的控制器映射并执行后续的后台操作呢,其核心为DispatcherServlet.java与HandlerMapper.在spring boot初始化的时候,将会加载所有的请求与对应的处理器映射为HandlerMapper组件.我们可以在springMVC的自动配置类中找到对应的Bean. @Bean @Primary @Override public RequestM

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

    前言 近期项目中使用的vux中的input,以及使用自定义校验规则和动态匹配错误提示,有时间记录下自己的使用经历和源码分析.希望大家多多指正,留言区发表自己宝贵的建议. 详解 列举官方文档中常用的几个属性的使用方法,代码如下 <group ref="group"> <x-input v-model="name" class="vux-input__name" title="名字" placeholder=&q

  • Android View源码解读 DecorView与ViewRootImpl浅谈

    前言 对于Android开发者来说,View无疑是开发中经常接触的,包括它的事件分发机制.测量.布局.绘制流程等,如果要自定义一个View,那么应该对以上流程有所了解.研究.本系列文章将会为大家带来View的工作流程详细解析.在深入接触View的测量.布局.绘制这三个流程之前,我们从Activity入手,看看从Activity创建后到View的正式工作之前,所要经历的步骤.以下源码均取自Android API 21. 从setContentView说起 一般地,我们在Activity中,会在on

  • 浅谈Mybatis获取参数值的方式

    目录 一. Mybatis获取参数值的各种情况 1.mapper接口方法的参数为单个字面量的类型 2.mapper接口方法的参数有多个 3.手动把参数放在map集合中 4.mapper接口方法的参数是实体类型的参数 5.通过@Param注解命名参数(比较常用) 二.总结 三.Param源码分析 Mybatis获取参数值的两种方式:${},#{} ${}本质:字符串拼接,注意:单引号要加上 #{}:本质:占位符赋值 一. Mybatis获取参数值的各种情况 1.mapper接口方法的参数为单个字面

  • 浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • 浅谈JavaScript 浏览器对象

    window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:

  • 浅谈JS正则表达式的RegExp对象和括号的使用

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

随机推荐