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 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
Vue实现简单计算器
Jan 20 Vue.js
详解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
fgetcvs在linux的问题
2012/01/15 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
简单实现php上传文件功能
2017/09/21 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
详谈python read readline readlines的区别
2017/09/22 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
求职信的最佳写作思路
2014/02/01 职场文书
董事长助理岗位职责
2014/02/18 职场文书
小学生常见病防治方案
2014/06/06 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
老乡会致辞
2015/07/28 职场文书
教师研修随笔感言
2015/11/18 职场文书