zoukankan      html  css  js  c++  java
  • input组件中实时转换数据值为千位符格式的策略

      在Vue工程中,采用了elemnt-ui组件库进行前端开发,有这样一个需求:在input组件中只能限制输入数字和小数点符号,并且小数点后最多保留两位有效数字,同时需要支持实时动态地将数字自动转换为千位符格式。

      面对这样的需求,我们首先要判断input组件自身是否有这样的属性支持,根据element-ui官方介绍,没有发现这样的属性;接下来我们就要分析如何通过逻辑关系来实现它了,不过整体的逻辑思路也很简单,包括校验和格式化两部分;具体的实现流程方式有两种策略流程可供参考:

    • 先校验输入的内容是否符合要求,然后对符合要求的内容进行格式化处理
    • 先对输入的内容进行格式化处理,然后对格式化后的内容进行检验是否符要求

      目前是根据第一种策略来实现的,先校验输入的内容,然后进行格式化处理,最后在blur事件时保留两位有效数字(不进行四舍五入操作,只单纯地保留位数)。这里的校验方式可以通过表单校验实时校验,也可以通过监听来实时校验;

      1、表单校验

      在<el-form-item>的插槽中放置<el-input>组件,同时添加el-input组件的input事件,在该事件的处理方法中调用Form的validateField函数对表单指定字段进行校验,校验通过了就可以回调函数中进行格式化处理。

      2、监听校验

      通过watch属性来监听el-input组件绑定值的变化,在handle中先进行校验,校验通过了就进行格式转换,最后通过$emit()方式重新赋值,不能直接给绑定值赋值操作哦,不然控制台会提示错误信息。

  • 相关阅读:
    linux 通配符
    linux 常用快捷键
    datatables-2
    datables
    datatables
    http://blog.csdn.net/heqingsong1/article/details/8540665
    软件提升知识点
    深入浅出单实例Singleton设计模式
    详解js跨域问题
    自定义控件之绘图篇(四):canvas变换与操作
  • 原文地址:https://www.cnblogs.com/bien94/p/12676156.html
Copyright © 2011-2022 走看看