用實例解析vue如何使用自定義事件的表單輸入組件

發(fā)布時間：2020-07-20 11:46:19 來源：億速云閱讀：206 作者：小豬欄目：web開發(fā)

這篇文章主要用實例解析vue如何使用自定義事件的表單輸入組件，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

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

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

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

<input v-model="something">

這不過是以下示例的語法糖：

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

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

自定義日期輸入組件實現(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時才觸發(fā)事件，以防止用戶手動輸入年份時計算不正確
        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>

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

自定義貨幣組件實現(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}(&#63;=(\d{3})+(\.\d*)&#63;$)/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');//只能輸入兩個小數(shù) 
        if(value.indexOf(".") < 0 && value !=""){//以上已經(jīng)過濾，此處控制的是如果沒有小數(shù)點，首位不能為類似于 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}(&#63;=(\d{3})+(\.\d*)&#63;$)/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事件中還要觸發(fā)input事件，這樣不就造成循環(huán)調(diào)用了嗎，后來深入研究，

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

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

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

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

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

看完上述內(nèi)容，是不是對用實例解析vue如何使用自定義事件的表單輸入組件有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

用實例解析vue如何使用自定義事件的表單輸入組件

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

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽