溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要用實例解析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事件為調用該組件的父組件的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如何使用自定義事件的表單輸入組件有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
