欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用自定義事件的表單輸入組件用法詳解【日期組件與貨幣組件】

 更新時(shí)間：2020年06月01日 11:59:38   作者：hanxue_tyc  
這篇文章主要介紹了vue使用自定義事件的表單輸入組件用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js日期組件與貨幣組件相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了vue使用自定義事件的表單輸入組件用法。分享給大家供大家參考，具體如下：

自定義事件可以用來(lái)創(chuàng)建自定義的表單輸入組件，使用 v-model 來(lái)進(jìn)行數(shù)據(jù)雙向綁定。

v-model的實(shí)現(xiàn)原理 :

<input v-model="something">

這不過(guò)是以下示例的語(yǔ)法糖：

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

在開(kāi)發(fā)項(xiàng)目中，當(dāng)遇到日期數(shù)據(jù)時(shí)，往往后臺(tái)的日期數(shù)據(jù)都為long型，而前臺(tái)顯示成日期型，在使用v-model時(shí)，需要轉(zhuǎn)換一下，為了簡(jiǎn)化轉(zhuǎn)換過(guò)程，對(duì)此實(shí)現(xiàn)自定義日期輸入組件，該組件接收l(shuí)ong型日期數(shù)據(jù)，顯示為date型，通過(guò)v-model實(shí)現(xiàn)雙向綁定

自定義日期輸入組件實(shí)現(xiàn)代碼：

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時(shí)才觸發(fā)事件，以防止用戶(hù)手動(dòng)輸入年份時(shí)計(jì)算不正確
        if(value && _val[0]>=1970){
          this.$emit('input',$api.getLong(value));
        }
      }
    }
  }
  //dateFormat函數(shù) long轉(zhuǎn)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函數(shù) date轉(zhuǎn)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型數(shù)據(jù)
      }
    }
  }
</script>

項(xiàng)目需求，在表單中貨幣組件，用戶(hù)輸入數(shù)字，為其自動(dòng)添加逗號(hào)分隔符，且只能輸入數(shù)字，限制小數(shù)點(diǎn)后最多兩位，實(shí)現(xiàn)了自定義貨幣組件

自定義貨幣組件實(shí)現(xiàn)代碼：

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');//只能輸入兩個(gè)小數(shù) 
        if(value.indexOf(".") < 0 && value !=""){//以上已經(jīng)過(guò)濾，此處控制的是如果沒(méi)有小數(shù)點(diǎn)，首位不能為類(lèi)似于 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>

實(shí)例圖片

一開(kāi)始不明白

自定義組件中綁定的input事件中

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

的含義

為什么input事件中還要觸發(fā)input事件，這樣不就造成循環(huán)調(diào)用了嗎，后來(lái)深入研究，

才明白，$emit是用于子組件觸發(fā)父組件的事件函數(shù)，所以此處的input事件為調(diào)用該組件的父組件的input事件

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

而父組件的input事件則是v-model的實(shí)現(xiàn)原理

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

所以子組件的input事件會(huì)觸發(fā)父組件的input事件，進(jìn)而改變vue data數(shù)據(jù)，data數(shù)據(jù)變化觸發(fā)v-bind:value來(lái)更新頁(yè)面數(shù)據(jù)顯示。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論