Vue.js ドロップダウン コンポーネント付きテキストボックス

Vue.js ドロップダウン コンポーネント付きテキストボックス

ドロップダウン付きのテキストボックスを使用すると、ユーザーはドロップダウン リストから入力を選択したり、入力値を自由に入力したりできます。これは比較的一般的な UI 要素です。ユーザーに代替オプションを提供して操作時間を節約したり、少数の状況に適応する可能性を提供したりすることもできます。

当初、このコンポーネントは非常に一般的で、そのまま適用できる既成の例がたくさんあるはずだと考えていました。しかし、調べてみると、多くの類似コンポーネントには、検索、複数選択など、機能が多すぎることがわかりました(一言で言えば、複雑すぎるのです)。そこで、シンプルで使いやすいものを自分で書いてみようと思いました。困惑していたときにとても助けていただいたフェイさんに感謝したいと思います。

この UI 要素は、Common Bar Width アプリで使用されます。

コンポーネントの登録

カプセル化されたコンポーネント コードをコピーして貼り付け、グローバル コンポーネントを登録します。

設計時には、テキスト入力ボックス、数値入力ボックス、パーセンテージ入力ボックスなど、さまざまな種類の入力ボックスが存在する可能性があることが考慮されました。したがって、カプセル化されたコード内の入力を制限するために、 inputRule関数が使用されます。制限方法は、正規表現を使用してフィルタリングすることです。他のタイプがある場合は、 inputRuleでフィルタリング条件を変更することもできます。

<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 でデータを親コンポーネントに動的にバインドします。

  • type: 入力ボックスのタイプ。現在はテキスト、数値、パーセンテージをサポートしています。
  • オプション: 入力ボックスのドロップダウンリストのオプション
  • 値: 入力ボックスの値
  • 無効: 入力ボックスのクリックを禁止するかどうか

さらに、入力ボックスの値を更新するために親インスタンスで定義する必要もあります。

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.jsデジタル入力ボックスコンポーネントの使い方の詳細な説明
  • JS は Alipay 入力テキスト入力ボックス拡大コンポーネントの例を模倣します
  • JavaScript コンポーネント開発: 入力ボックスと候補ボックス
  • JSは正規表現を使用して、入力ボックスを小数点以下2桁の整数と小数点(金額または現金)のみに制限します。
  • js と jQuery リアルタイム監視入力ボックスの値 oninput と onpropertychange メソッド
  • jsは入力ボックスの値の即時変更を監視します。onpropertychange、oninput
  • JSはWebページ上に入力ボックスをポップアップする方法を実装します
  • jsは入力ボックスのtype属性を動的に変更します(実装方法の分析)
  • jsは入力ボックスの値のリアルタイムの変化を監視します
  • JavaScriptは入力ボックスコンポーネントを実装します

<<:  MySQL の 2 種類の一時テーブルの使用方法の詳細な説明

>>:  Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

推薦する

Vue ディレクティブ v-html と v-text

目次1. v-text テキストレンダリング命令2. v-html 1. v-text テキストレン...

Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明

目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...

Centos8 の Django プロジェクトに nginx+uwsgi をデプロイするチュートリアル

1. 仮想環境virtualenvのインストール1. virtualenvをインストールするpip3...

Vueでスケルトンスクリーンを実装する例

目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...

Vue3 + TypeScript 開発の概要

目次Vue3 + TypeScript 学習1. 環境設定1.1 最新のVue scaffoldin...

MySQLインデックスの基礎となるデータ構造の詳細

目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...

CentOS6 アップグレード glibc 操作手順

目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...

CSS で写真のスタッキング効果を実装するサンプルコード

成果を達成するステップ1. 初期index.html最初の写真、一番上の写真を作成します。写真の i...

Docker rocketmq デプロイメントの実装例

目次準備展開プロセスRocketMQ の初体験関連する質問ヘルプドキュメント私は最近 RocketM...

ウェブデザイン経験

<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...

JavaScript のシングルトン デザイン パターン

目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....

Windows での MySQL 8.0.13 解凍バージョンのインストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.13のインストールグラフィックチュートリアルを紹介します...

Linux環境にDocker環境をインストールする(落とし穴なし)

目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...

Oracle VM VirtualBox の CentOS7 オペレーティング システムのインストール チュートリアル図

目次インストール手順環境設定実行構成インストール手順ダウンロードアドレス: バージョン6.0 最初に...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...