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 加载时自动调整图片大小
May 28 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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会员权限控制实现原理分析
2011/05/29 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
flexigrid 参数说明
2010/11/23 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
jquery实现简单的表单验证
2015/11/17 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
vue-cli3.0 特性解读
2018/04/22 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python温度转换实例分析
2018/01/17 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python文件读写代码实例
2019/10/21 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
个人先进事迹材料范文
2014/12/29 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
初一英语教学反思
2016/02/15 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js