vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】


Posted in Javascript onJune 01, 2020

本文实例讲述了vue使用自定义事件的表单输入组件用法。分享给大家供大家参考,具体如下:

自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。

v-model的实现原理 :

<input v-model="something">

这不过是以下示例的语法糖:

<input
v-bind:value="something"
v-on:input="something = $event.target.value">

在开发项目中,当遇到日期数据时,往往后台的日期数据都为long型,而前台显示成日期型,在使用v-model时,需要转换一下,为了简化转换过程,对此实现自定义日期输入组件,该组件接收long型日期数据,显示为date型,通过v-model实现双向绑定

自定义日期输入组件实现代码:

dates.vue组件

<template>
   <input ref='dateinput' type="date" class="form-control" v-bind:value="svalue(value)" v-on:input="uvalue($event.target.value)" />
</template>
<script type="text/javascript">
  export default{
    props:['value'],
    methods:{
      svalue(value){
        if(value) {
          return $api.dateFormat(value);
        }else{
          return '';
        }
      },
      uvalue(value){
        var _val = value.split('-');
        //大于1970时才触发事件,以防止用户手动输入年份时计算不正确
        if(value && _val[0]>=1970){
          this.$emit('input',$api.getLong(value));
        }
      }
    }
  }
  //dateFormat函数 long转date型
  var dateFormat=function(longTypeDate){ 
    var dateType = ""; 
    if(longTypeDate){
      longTypeDate = parseInt(longTypeDate);
      var date = new Date(longTypeDate); 
      dateType += date.getFullYear();  //年 
      dateType += "-" + getMonth(date); //月  
      dateType += "-" + getDay(date);  //日 
    }else{
      dateType = (new Date()).format("yyyy-MM-dd") ;
    }
    return dateType;
  } 
  //返回 01-12 的月份值  
  var getMonth=function (date){ 
    var month = ""; 
    month = date.getMonth() + 1; //getMonth()得到的月份是0-11 
    if(month<10){ 
      month = "0" + month; 
    } 
    return month; 
  } 
  //返回01-30的日期 
  var getDay=function (date){ 
    var day = ""; 
    day = date.getDate(); 
    if(day<10){ 
      day = "0" + day; 
    } 
    return day; 
  }
  //getLong函数 date转long型
  var getLong = function(date){
    date=Date.parse(date.replace(new RegExp("-","gm"),"/"));
    return date;
  }
</script>

使用方法

<template>
  <div>
    <dates name="guaranteeBeginDay" v-model="guaranteeBeginDay" />
  </div>
</template>
<script>
  import dates from '../dates/dates.vue'
  export default{
    data(){
      return {
        guaranteeBeginDay:1509697628823 //long型数据
      }
    }
  }
</script>

项目需求,在表单中货币组件,用户输入数字,为其自动添加逗号分隔符,且只能输入数字,限制小数点后最多两位,实现了自定义货币组件

自定义货币组件实现代码:

currency.vue组件

<template>
  <input refs="currencyinput" class="form-control" type="text" v-bind:value="showValue(value)" v-on:input="updateValue($event)" />
</template>

<script type="text/javascript">

  export default{
    props:['value'],
    methods:{
      showValue(value){
        if(!!!value){
         return '0';
        }
        return (value+'').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
      },
      updateValue(el){
        var value = el.target.value ;
        value = value.replace(/[^\d.]/g,"")
             .replace(/\.{2,}/g,".")
             .replace(".","$#$").replace(/\./g,"").replace("$#$",".")
             .replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数 
        if(value.indexOf(".") < 0 && value !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额 
          if(value.substr(0,1) == '0' && value.length == 2){ 
            value = value.substr(1,value.length);   
          } 
        }
        el.target.value = value.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');

        this.$emit('input', value);
      }
    }
  }
</script>

使用方法

<template>
  <div>
    <currency name="money" v-model="money" />
  </div>
</template>
<script>
  import dates from '../currency/currency.vue'
  export default{
    data(){
      return {
        money:12934350.34 
      }
    }
  }
</script>

实例图片

vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

一开始不明白

自定义组件中绑定的input事件中

this.$emit('input',$api.getLong(value)); || this.$emit('input', value);

的含义

为什么input事件中还要触发input事件,这样不就造成循环调用了吗,后来深入研究,

才明白,$emit是用于子组件触发父组件的事件函数,所以此处的input事件为调用该组件的父组件的input事件

<dates name="guaranteeBeginDay"
v-model="guaranteeBeginDay" /> || <currency 
name="money" v-model="money" />

而父组件的input事件则是v-model的实现原理

<input
v-bind:value="something"
v-on:input="something = $event.target.value">

所以子组件的input事件会触发父组件的input事件,进而改变vue data数据,data数据变化触发v-bind:value来更新页面数据显示。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
js 深拷贝函数
Dec 04 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
JS实现商品筛选功能
Aug 19 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 #Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 #Javascript
JS如何寻找数组中心索引过程解析
Jun 01 #Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 #Javascript
bootstrap-table后端分页功能完整实例
Jun 01 #Javascript
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
微信小程序订阅消息(java后端实现)开发
Jun 01 #Javascript
You might like
咖啡与牛奶
2021/03/03 冲泡冲煮
七款最流行的PHP本地服务器分享
2013/02/19 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python 如何上传包到pypi
2020/12/24 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
英国领先的游戏零售商:GAME
2019/09/24 全球购物
总经理司机职责
2014/02/02 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
经典安踏广告词
2014/03/21 职场文书
青年志愿者活动总结
2014/04/26 职场文书
房屋出租委托书格式
2014/09/23 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
七年级上册语文教学计划
2015/01/22 职场文书