vue 사용자 정의 이벤트 폼 입력 구성 요소 사용법 상세 설명[날짜 구성 요소 와 화폐 구성 요소]

이 사례 는 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>

인 스 턴 스 그림

처음에는 몰 랐 다
사용자 정의 구성 요소 에 연 결 된 input 이벤트 중

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

의미
왜 input 사건 에서 input 사건 을 촉발 시 켜 야 하 는 지 순환 호출 이 되 지 않 습 니까?나중에 깊이 연구 하 겠 습 니 다.
$emit 는 하위 구성 요소 가 부모 구성 요 소 를 촉발 하 는 이벤트 함수 임 을 알 게 되 었 습 니 다.따라서 이 구성 요소 의 부모 구성 요 소 를 호출 하 는 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 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.