element el-input directive数字进行控制


Posted in Javascript onOctober 11, 2018

使用自定义指令格式化el-input

背景

使用element开发的过程中遇到循环的数据只能输入数字,并且有不要小数点,有需要小数点的

使用vue directive 进行控制

element el-input directive数字进行控制

开发

页面使用方式 v-numberInt:0="item.first_fee" 0为保留几位小数

<tr v-for="(item,index) in form.valuation_rules" :key="index">  
  <td class="center" >    
   <el-input v-if="form.valuation_type==1" v-numberInt:0="item.first_fee" v-model.trim="item.first_amount"></el-input>  
   <el-input v-else v-model.trim="item.first_amount" v-numberInt:2="item.first_fee"></el-input>  
  </td>   
  <td class="center"> 
   <el-input v-model.trim="item.first_fee" v-numberInt:2="item.first_fee"></el-input>   </td>  
  <td class="center"> {{item.additional_amount}} 
  </td> 
  <td class="center">  
   <el-input v-model.trim="item.additional_fee" v-numberInt:2="item.additional_fee"></el-input>
  </td>
 </tr>

因为用的是element 的el-input ,组件input外层包着一层div所以要使用const element = el.getElementsByTagName('input')[0]获取 input对其监听失焦 当输入的不是数字时,失焦后会变成0,没有使用directive update方法,比较简单directives.js

directives.js

Vue.directive('numberInt', { bind: function(el, binding, vnode) { 
  const element = el.getElementsByTagName('input')[0] 
  const len = binding.arg  // 初始化设置 
  element.value = Number(element.value ).toFixed(len)  // 失焦时候格式化
  element.addEventListener('blur', function() { 
  if (isNaN(element.value)) {   
    vnode.data.model.callback(0)  
   } else {   
    vnode.data.model.callback(Number(element.value).toFixed(len)) 
   }  
   }) 
 }})

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

Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
JS实现商品筛选功能
Aug 19 Javascript
Angular实现响应式表单
Aug 04 Javascript
详解angular2.x创建项目入门指令
Oct 11 #Javascript
详解vscode中vue代码颜色插件
Oct 11 #Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 #Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 #Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 #Javascript
vue最简单的前后端交互示例详解
Oct 11 #Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 #Javascript
You might like
php数组一对一替换实现代码
2012/08/31 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python基础之文件读取的讲解
2019/02/16 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Django分页功能的实现代码详解
2019/07/29 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
中国旅游网站:途牛旅游网
2019/09/29 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
赔偿协议书
2015/01/27 职场文书
微信早安问候语
2015/11/10 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
Python中tqdm的使用和例子
2022/09/23 Python