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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
json对象转字符串如何实现
Dec 02 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
vue引用外部JS的两种种方法
Jan 28 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
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
Symfony核心类概述
2016/03/17 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
python 域名分析工具实现代码
2009/07/15 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python中异常报错处理方法汇总
2016/11/20 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
个人整改措施书面材料
2014/10/24 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL