ドロップダウン付きのテキストボックスを使用すると、ユーザーはドロップダウン リストから入力を選択したり、入力値を自由に入力したりできます。これは比較的一般的な 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. v-text テキストレンダリング命令2. v-html 1. v-text テキストレン...
目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...
1. 仮想環境virtualenvのインストール1. virtualenvをインストールするpip3...
目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...
目次Vue3 + TypeScript 学習1. 環境設定1.1 最新のVue scaffoldin...
目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...
目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...
成果を達成するステップ1. 初期index.html最初の写真、一番上の写真を作成します。写真の i...
目次準備展開プロセスRocketMQ の初体験関連する質問ヘルプドキュメント私は最近 RocketM...
<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...
目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....
この記事では、参考までにMySQL 8.0.13のインストールグラフィックチュートリアルを紹介します...
目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...
目次インストール手順環境設定実行構成インストール手順ダウンロードアドレス: バージョン6.0 最初に...
目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...