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 相关文章推荐
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
vue-model实现简易计算器
Aug 17 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
Javascript实现单选框效果
Dec 09 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面向对象程序设计方法实例详解
2016/12/24 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
popdiv
2006/07/14 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python中有函数重载吗
2020/05/28 Python
什么是python的id函数
2020/06/11 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
班组长的岗位职责
2013/12/09 职场文书
海南地接欢迎词
2014/01/14 职场文书
诚信考试标语
2014/06/24 职场文书
科学发展观演讲稿
2014/09/11 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python