ドロップダウン付きのテキストボックスを使用すると、ユーザーはドロップダウン リストから入力を選択したり、入力値を自由に入力したりできます。これは比較的一般的な UI 要素です。ユーザーに代替オプションを提供して操作時間を節約したり、少数の状況に適応する可能性を提供したりすることもできます。 当初、このコンポーネントは非常に一般的で、そのまま適用できる既成の例がたくさんあるはずだと考えていました。しかし、調べてみると、多くの類似コンポーネントには、検索、複数選択など、機能が多すぎることがわかりました(一言で言えば、複雑すぎるのです)。そこで、シンプルで使いやすいものを自分で書いてみようと思いました。困惑していたときにとても助けていただいたフェイさんに感謝したいと思います。 この UI 要素は、Common Bar Width アプリで使用されます。 コンポーネントの登録カプセル化されたコンポーネント コードをコピーして貼り付け、グローバル コンポーネントを登録します。 設計時には、テキスト入力ボックス、数値入力ボックス、パーセンテージ入力ボックスなど、さまざまな種類の入力ボックスが存在する可能性があることが考慮されました。したがって、カプセル化されたコード内の入力を制限するために、 <script type="text/x-template" id="ドロップダウン"> <div class="dropdown" v-if="オプション"> <!-- ドロップダウン入力 --> <input :type="タイプ" :disabled="無効" v-model="入力値" @focus="オプションを表示()" @blur="終了()" @keyup="キーモニター" @input="input_value = inputRule(type)" /> ... </スクリプト> <スクリプト> Vue.component('ドロップダウン', { テンプレート: '#dropdown', 小道具: { タイプ: 文字列、 オプション: 配列、 無効: ブール値、 値: 文字列 }, ... メソッド: { 入力ルール:関数(タイプ){ var 値; スイッチ(タイプ){ ケース 'テキスト': 値 = this.input_value.replace(/[^a-zA-Z0-9]/g,''); 壊す; ケース '番号': 値 = this.input_value.replace(/^(?![+-]?\d+(\.\d+)?$)/g,''); 壊す; ケース「パーセンテージ」: 値 = this.input_value.replace(/[^\d]/g,''); 値 = 値 > 100 ? '100' : 値; 値 = 値 < 0 ? '0' : 値; 壊す; デフォルト: console.log("制限なし"); } 戻り値; }, ... </スクリプト> コンポーネントの呼び出しカスタム ラベル呼び出しコンポーネントを追加します。 <ドロップダウンタイプ = "テキスト" :options = "テキストオプション" :value = "テキスト値" :disabled = "テキストが無効" @on_change_input_value = "テキスト変更時"> </ドロップダウン> データの受け渡し最後に、props でデータを親コンポーネントに動的にバインドします。
さらに、入力ボックスの値を更新するために親インスタンスで定義する必要もあります。 on_change_input_value: 値を更新する データ: 関数 () { 戻る { テキスト値: 'ccc', text_disabled: 偽、 テキストオプション: [ { id: 1、名前: 'a' }, { id: 2、名前: 'bb' }, { id: 3、名前: 'ccc' }, { id: 4、名前: 'dddd' }, { id: 5, 名前: 'eeeee' }, { id: 6, 名前: 'fffff ' }, { id: 7, 名前: 'gggggg' }, { id: 8、名前: 'hhhhhhh' }, { id: 9, 名前: 'iiiiiii' }, ]、 ... } }, ... メソッド: { onTextChange: 関数 (新しいテキスト値) { this.text_value = 新しいテキスト値; }, ... }, ソースコード GitHub これで、Vue.js Textbox with Dropdown コンポーネントに関するこの記事は終了です。Vue.js Textbox with Dropdown コンポーネントの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL の 2 種類の一時テーブルの使用方法の詳細な説明
>>: Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解
目次序文1. オブジェクト構築にプロトタイプを設定する1.1 __proto__ の使用における特殊...
方法 1: hostnamectl の変更ステップ1 ホスト名を確認するホスト名ステップ2 ホスト名...
目次1. サンプルコード2. 現象を通して本質を見抜く3. 実施原則4. 親コンポーネントのコンパイ...
主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...
WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...
ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...
序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...
要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...
導入インストールするシステムの数が多い場合、USB フラッシュ ドライブまたは CD を使用した手動...
現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非...
マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...
目次序文文章プリミティブ型プリミティブ値ラッパーオブジェクト物体コンストラクタ通常機能(関数)プリミ...
基本的な紹介特徴Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイ...