vue使用自定義事件的表單輸入組件用法詳解【日期組件與貨幣組件】
本文實(shí)例講述了vue使用自定義事件的表單輸入組件用法。分享給大家供大家參考，具體如下：
自定義事件可以用來創(chuàng)建自定義的表單輸入組件，使用 v-model 來進(jìn)行數(shù)據(jù)雙向綁定。
v-model的實(shí)現(xiàn)原理 :
<input v-model="something">
這不過是以下示例的語法糖：
<input v-bind:value="something" v-on:input="something = $event.target.value">
在開發(fā)項(xiàng)目中，當(dāng)遇到日期數(shù)據(jù)時，往往后臺的日期數(shù)據(jù)都為long型，而前臺顯示成日期型，在使用v-model時，需要轉(zhuǎn)換一下，為了簡化轉(zhuǎn)換過程，對此實(shí)現(xiàn)自定義日期輸入組件，該組件接收long型日期數(shù)據(jù)，顯示為date型，通過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時才觸發(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>
項(xiàng)目需求，在表單中貨幣組件，用戶輸入數(shù)字，為其自動添加逗號分隔符，且只能輸入數(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');//只能輸入兩個小數(shù)
if(value.indexOf(".") < 0 && value !=""){//以上已經(jīng)過濾，此處控制的是如果沒有小數(shù)點(diǎn)，首位不能為類似于 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í)例圖片
一開始不明白
自定義組件中綁定的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的實(shí)現(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ù)顯示。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
vue實(shí)現(xiàn)兩個區(qū)域滾動條同步滾動
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)兩個區(qū)域滾動條同步滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Vue實(shí)現(xiàn)數(shù)值型輸入框并限制長度
這篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)值型輸入框并限制長度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
詳解vue-cli腳手架build目錄中的dev-server.js配置文件
這篇文章主要介紹了詳解vue-cli腳手架build目錄中的dev-server.js配置文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue-cli3單頁構(gòu)建大型項(xiàng)目方案
這篇文章主要介紹了vue-cli3單頁構(gòu)建大型項(xiàng)目方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法
這篇文章主要介紹了Vue-element-admin導(dǎo)出json和導(dǎo)入json文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了全局引入vant后使用Toast的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue使用keep-alive后從部分頁面進(jìn)入不緩存示例詳解
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后從部分頁面進(jìn)入不緩存的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03
vue ElementUI實(shí)現(xiàn)異步加載樹
這篇文章主要為大家詳細(xì)介紹了vue ElementUI實(shí)現(xiàn)異步加載樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue項(xiàng)目使用$router.go(-1)返回時刷新原來的界面操作
這篇文章主要介紹了vue項(xiàng)目使用$router.go(-1)返回時刷新原來的界面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文詳細(xì)講解了Vue3生命周期函數(shù)和方法。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12