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 におけるサーバーとロケーションのマッチングロジックの詳細な理解

推薦する

JS のオブジェクトリテラルの詳細な説明

目次序文1. オブジェクト構築にプロトタイプを設定する1.1 __proto__ の使用における特殊...

Centos7のホスト名を変更する3つの方法

方法 1: hostnamectl の変更ステップ1 ホスト名を確認するホスト名ステップ2 ホスト名...

Vueスロットの実装原理についての簡単な説明

目次1. サンプルコード2. 現象を通して本質を見抜く3. 実施原則4. 親コンポーネントのコンパイ...

SQL と NoSQL の違いのまとめ

主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...

WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...

デザイン理論: なぜ私たちは間違った場所を見ているのでしょうか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...

Win2008 サーバー セキュリティ チェック手順ガイド (日常のメンテナンス手順)

ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...

Ubuntu 基本チュートリアル: apt-get コマンド

序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...

読み取り専用と無効の違い

要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...

Windows Server 2016 でサービスを展開する方法 (グラフィック チュートリアル)

導入インストールするシステムの数が多い場合、USB フラッシュ ドライブまたは CD を使用した手動...

友達やグループを見つけるためのJavaScriptのLayim

現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非...

Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート

マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...

JavaScriptのプリミティブ値とラッパーオブジェクトの詳細な紹介

目次序文文章プリミティブ型プリミティブ値ラッパーオブジェクト物体コンストラクタ通常機能(関数)プリミ...

CSS3 FlexBox の伸縮自在なレイアウトを 10 分で理解する

基本的な紹介特徴Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイ...