Entrada de componente personalizado que admite el milésimo signo

　　1. El código lógico de implementación del componente, el nombre del archivo es commafy-input.vue

<plantilla> 
    <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> 
importar Vue desde 'vue' 
exportar predeterminado { 
    nombre: 'entrada de comando ' , 
    modelo: { 
        prop: ' valor ' ,
        evento: 'input' 
    }, 
    accesorios: { 
        value: { 
            type: String, 
            default : '' 
        }, 
        type: { 
            type: String, 
            default : 'text' 
        }, 
        disabled: { 
            type: Boolean, 
            default : false 
        }, 
        placeholder : { 
            type: String, 
            default : '' 
        }, 
        obligatorio: { 
            type: Boolean, 
            default : false 
        } 
    }, 
    data () { 
        return { 
            errorTips: Vue.prototype. $ store.state.ss.tips.number, 
            showError: false 
        } 
    }, 
    watch: { 
        value: { 
            handler: function (newVal, oldVal) { 
                console.log ( '------ -valor de vigilancia : ' , 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})? $ / ; 
                    deje 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) 
                } 
            }, 
            inmediato: verdadero 
        } 
    } 
}
 </script> 

<estilo de ámbito>
.commafy - input__inner { 
    background - color: #fff; 
    fondo - imagen: ninguno; 
    borde - radio: 4px; 
    borde: 1px sólido # dcdfe6; tamaño de 
    caja : caja de borde ; 
    color: # 606266 ; 
    pantalla: en línea - bloque; 
    fuente - tamaño: heredar; 
    altura: 32px; 
    línea - altura: 32px; 
    relleno: 0 15px; 
    transición: borde -color .2s cubic-bezier (.645, .045, .355,1 ); 
    ancho: 100%; 
} 
.commafy - input__inner: hover { 
    border - color: # c0c4cc; 
} 
.commafy - input__inner: focus { 
    border - color: # 409EFF; 
} 
.commafy - input__inner: obligatorio, 
.commafy - input__inner_error, 
.commafy - input__inner_error: hover, 
.commafy - input__inner_error: focus { 
    border - color: # f56c6c; 
} 
.commafy - input__inner: disabled { 
    background - color: # f5f7fa; 
    borde -color del : # e4e7ed; 
    color: # c0c4cc; 
    Cursor: No - permitido; 
} 
.commafy - div__error { 
    color: # f56c6c; 
    fuente - tamaño: 12px; altura de 
    línea : 1 ; 
    relleno - superior: 4px; 
    posición: absoluta; 
    parte superior: 100% ; 
    izquierda: 0 ; 
}
 </style>

　　2. Uso de componentes

• Regístrese como un componente global en el archivo main.js:

importar commafyInput desde 'commafy-input' 

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

• Use el componente en el archivo requerido:

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

 　　3. Descripción: este componente se puede utilizar directamente en el proyecto.