vue+element-ui 失去焦点添加千位符获取焦点去掉千位符的输入框

Posted 2021-09-26 程兆朋的博客

工作三年，一共两个公司，都是开发有关金融方面的业务系统，他们都有一个小需求就是《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>