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 相关文章推荐
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
Angular的事件和表单详解
Dec 26 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
es6数值的扩展方法
Mar 11 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
基于Vue实现微前端的示例代码
Apr 24 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
多文件上载系统完整版
2006/10/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
在Windows8上的搭建Python和Django环境
2014/07/03 Python
在Python中使用模块的教程
2015/04/27 Python
python Django批量导入不重复数据
2016/03/25 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
工地质量标语
2014/06/12 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
2015年售票员工作总结
2015/04/29 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
python之基数排序的实现
2021/07/26 Python
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js