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 相关文章推荐
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
jQuery 连续列表实现代码
2009/12/21 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
Python lxml模块安装教程
2015/06/02 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
大整数数相乘的问题
2012/07/22 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
纺织工程专业个人求职信范文
2014/01/27 职场文书
运动会跳远广播稿
2014/02/04 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
村干部任职承诺书
2015/01/21 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
电影雨中的树观后感
2015/06/15 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
教师个人教学反思
2016/02/23 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
讲解MySQL增删改操作
2022/05/06 MySQL