工作三年，一共两个公司，都是开发有关金融方面的业务系统，他们都有一个小需求就是《money输入框》。
需求：
1.支持v-model。
2.支持el-input所有属性。
2.失去焦点添加千位符。
3.获取焦点去掉千位符。
废话不多说，直接上代码。
一.money输入框组件
<template>
<div class="money-input">
<el-input type="text" ref="input" v-model="noticeData" @blur="focusBlur('blur')"
:placeholder="placeholder" :disabled="disabled"
@focus="focusBlur('focus')"/>
</div>
</template>
<script>
export default {
name: 'MoneyInput',
props: {
// 可以添加element-ui的所有属性(目前我只添加三个属性)
value: {
type: [ String, Number ],
default: '',
},
placeholder: {
type: String,
default: '',
},
disabled: {
type: Boolean,
default: false
}
},
data () {
return {
noticeData: ''
};
},
created () {
},
mounted () {
this.separate(this.value);
},
methods: {
// 增加千位符
addThousandSign (num) {
if (num) {
const res = num.toString().replace(/\d+/, (n) => { // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g, ($1) => {
return $1 + ',';
});
});
return res;
}
},
// 去掉千位符
removeThousandSign (num) {
if (num) {
num = num.toString();
num = num.replace(/,/gi, '');
num = num.replace(/[ ]/g, ''); //去除空格
return num;
}
},
// 初始化 添加千位符赋值
separate (val) {
if(val){
this.noticeData = this.addThousandSign(val);
}
},
// 鼠标失去焦点鼠标获取焦点触发
focusBlur (type) {
if (type === 'blur') {
this.noticeData = this.addThousandSign(this.noticeData);
this.$emit('input', this.removeThousandSign(this.noticeData));
} else if (type === 'focus') {
this.noticeData = this.removeThousandSign(this.noticeData);
}
}
},
computed: {},
watch: {
value (val) {
this.separate(val);
}
}
};
</script>
<style scoped>
</style>
二.使用组件
<template>
<div class="dome_component">
v-model="value"：{{ value }}
<MoneyInput v-model="value"/>
</div>
</template>
<script>
// 引入组件
import MoneyInput from './components/money-input';
export default {
name: 'DomeComponent',
components: {
MoneyInput,
},
data () {
return {
value: '',
};
},
watch: {
},
filters: {},
computed: {},
mounted () {
},
methods: {}
};
</script>
<style lang="less" type="text/less">
.dome_component {
}
</style>
