JavaScript:
<template>
<input v-model="dataValue"
:disabled="disabled"
@change="handlerchange"
@focus="focusget"
@blur="focusout"
clearable>
</input>
</template>
<script>
export default {
name: "MoneyInput",
created() {
let self = this;
self.dataValue = self.value;
self.focusout();
},
props: {
value: {
type: [Number, String],
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
dataValue:0,
//disabled:false,
isFocus:false,
};
},
watch: {
dataValue: {
immediate: true,
handler(val) {
//回傳值要去除千分號處理
val = parseInt(this.delcommafy(val));
val = isNaN(val) ? 0 :val;
this.$emit('input',val);
},
},
value: {
immediate: true,
handler(val) {
//外部數值改變連動處理
let self = this;
self.dataValue = val;
if(self.isFocus==false){
self.focusout();
}
},
},
},
methods: {
focusout(){
let self = this;
self.isFocus = false;
self.dataValue = self.comdify(self.delcommafy(self.dataValue));
},
focusget(){
let self = this;
self.isFocus = true;
self.dataValue = self.delcommafy(self.dataValue);
},
handlerchange(){
let self = this;
self.$emit("change", self.value);
},
//數值加上千分號處理
comdify(n) {
if(!n) return n;
let str = n.split('.');
let re = /\d{1,3}(?=(\d{3})+$)/g;
let n1 = str[0].replace(re, "$&,");
return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}`;
},
//去除千分位中的‘,’
delcommafy(num){
if(!num) return num;
num = num.toString();
num = num.replace(/,/gi, '');
return num;
},
},
}
</script>
<style scoped>
</style>
可直接引入後,帶入參數 value 或是 v-model 來處理控制。
引入值如果不是數值會轉帶為0出來。
最后編輯: