Vueでキーボードイベントによる入力ボックスのスペースの除去

1153 ワード

[Talk is cheap. Show me the code]
理論知識を見たくない場合は、最後のコード例を直接移動してください.
一、プロジェクトシーン
プロジェクトビジネスは、VueおよびElementUIのバックグラウンド管理システムに基づいており、フォームの正規検証に関連しています.フォーム検証には、入力ボックスのスペースを削除し、アルファベットを大文字に変換する必要があります.
二、出会った問題
最初の解決策:Vue自体はスペースを除去する修飾子 v-model.trimを提供しているので、 v-model.trimの修飾子でスペースを除去することができますが、v-model.trimは入力ボックスの前後のスペースしか除去できず、中間のスペースは除去できません.したがって、フォームイベントをリスニングし、正規一致でスペースを除去します.
フォームイベントには @input @keyupなどがあります.しかし、ElementUIはフォームを二次パッケージ化しており、コンポーネント内のオリジナルイベントをリスニングするには .native修飾子を追加してオリジナルのkeyupイベントをリスニングする必要がある.
三、コード例
HTML:v-modelの値は、自分の必要な値を正常にバインドします.
   
        
  

JS:
methods:{
    /**
     * @param {*  state         } state
     */
    clearTrim(state) {
        this.listQuery[state] = this.listQuery[state].replace(/\s/ig, '').toUpperCase().slice(0, 20)
    },
}

本文に関する意見があれば、文章の下に伝言を残してください.私は見た最初の時間に返事します.