1000番目の符号をサポートするカスタムコンポーネント入力

　　1.コンポーネントの実装ロジックコード。ファイル名は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> 
Vueを 'vue' からインポート
エクスポートデフォルト{ 
    名前： 'commafy-input ' 、
    モデル：{ 
        prop： ' value ' 、
        event：'input' 
    }、
    props：{ 
        value：{ 
            type：String、
            default： '' 
        }、
        type：{ 
            type：String、
            default： 'text' 
        }、
        disabled：{ 
            type：Boolean、
            default：false 
        }、
        placeholder：{ 
            タイプ：文字列、
            デフォルト： '' 
        }、
        必須：{ 
            タイプ：ブール、
            デフォルト：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}）？$ / ; 
                    testNumber =値=>にします{
                         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; 
    背景 - 画像：なし。
    ボーダー - 半径：4px; 
    ボーダー：1ピクセルの実線＃dcdfe6; 
    box -sizing：border- box; 
    色：＃ 606266 ; 
    表示：インライン - ブロック; 
    フォント - サイズ：継承。
    高さ：32px; 
    行 - 高さ：32px; 
    パディング： 0 15px; 
    トランジション：border -color .2s cubic-bezier（.645、.045、.355,1 ）; 
    幅： 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;
    境界線の -色：＃e4e7ed; 
    色：＃c0c4cc; 
    カーソル：不可 - 許可。
} 
.commafy - div__error { 
    color：＃f56c6c; 
    フォント - サイズ：12px; 
    line -height：1 ; 
    パディング - 上：4px; 
    位置：絶対; 
    上： 100％; 
    左： 0 ; 
}
 </ style>

　　2.コンポーネントの使用

• main.jsファイルにグローバルコンポーネントとして登録します。

「commafy-input」Vue.componentからcommafyInputをインポートします

（「commafy-input」、commafyInput）

• 必要なファイルでコンポーネントを使用します。

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

 　　3.説明：このコンポーネントは、プロジェクトで直接使用できます。