Custom component input supporting the thousandth sign

　　1. The implementation logic code of the component, the file name is commafy-input.vue

<template>
    <div>
        <input :class="{ 'commafy-input__inner': true, 'commafy-input__inner_error': showError }"
            :disabled="disabled" :placeholder="placeholder" :required="required"
            type="type" v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
        <div class="commafy-div__error" v-if="showError">{{ errorTips }}</div>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    name: 'commafy-input',
    model: {
        prop: 'value',
        event: 'input'
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'text'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: ''
        },
        required: {
            type: Boolean,
            default: false
        }
    },
    data() { 
        return {
            errorTips: Vue.prototype.$store.state.ss.tips.number,
            showError: false
        }
    },
    watch: {
        value: {
            handler: function(newVal, oldVal) {
                console.log('-------watch value:', newVal, oldVal)
                if (newVal) {
                    let numberPattern = /^((?:-?0)|(?:-?[1-9]\d*))(?:\.\d{1,2})?$/;
                    let numberThousandsPattern = /^((?:-?0)|(?:-?[1-9]\d*)|(?:-?[1-9],\d{3})?)(?:,\d{3})*(?:\.\d{1,2})?$/;
                    let testNumber = value => {
                        if (numberPattern.test(value)) {
                            this.showError = false
                        } else {
                            this.showError = true
                        }
                    }
                    let index = newVal.indexOf(',')
                    if (index === -1) {
                        testNumber(newVal)
                    } else {
                        if (numberThousandsPattern.test(newVal)) {
                            this.showError = false
                        } else {
                            index = newVal.lastIndexOf(',')
                            if (index === newVal.length - 1) {
                                this.showError = true
                            }
                            newVal = newVal.replace(/,/g, '')
                            testNumber(newVal)
                        }
                    }
                } else {
                    this.showError = false
                }
                console.log('--------showError:', this.showError)
                if (this.showError === false && newVal) {
                    let formatValue = this.$global.Number.commafyEx(newVal)
                    console.log('-------watch formatValue :', formatValue)
                    this.$emit('input', formatValue)
                }
            },
            immediate: true
        }
    }
}
</script>

<style scoped>
.commafy-input__inner {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.commafy-input__inner:hover {
    border-color: #c0c4cc;
}
.commafy-input__inner:focus {
    border-color: #409EFF;
}
.commafy-input__inner:required,
.commafy-input__inner_error,
.commafy-input__inner_error:hover,
.commafy-input__inner_error:focus {
    border-color: #f56c6c;
}
.commafy-input__inner:disabled {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
}
.commafy - div__error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
}
</style>

　　2. Use of components

• Register as a global component in the main.js file:

import commafyInput from 'commafy-input'

Vue.component ( 'commafy-input', commafyInput)

• Use the component in the required file:

<commafy-input v-model="name" :disabled="disabled" :required="requried"
   :placeholder="请输入名称"></commafy-input>

 　　3. Description: This component can be used directly in the project.