次のような簡単なセットアップと、Vue 3 を使用したクライアント側 JavaScript アプリケーションがあります:
HTML (選択ボックス付き):
リーリー
検索などの最新機能を備えた「優れた」選択ボックス (vue-select や select2 など) を使用したいのですが、関連コンポーネントを含める方法がわかりません。 jQuery と Vue.js の混合に関する警告がたくさん表示されるので、select2 を jquery プラグインとして使用し、そのようにレンダリングすることは避けています。
選択ボックスを「より良い」より現代的な選択要素に変えるにはどうすればよいでしょうか?
P粉9869374572024-03-31 09:43:16
プラグインを使用したくないが、自分でビルドしたい場合 (私はそうするのが好きです)。
これを行うには、div 内でオプションを検索するために使用できる入力タイプのテキストを含む div を作成します。これらのオプションは、アンカー タグとして非表示の div に保存されます。次に、イベント リスナーをアンカー タグ要素と呼び出す必要がある関数にアタッチします。
これを見てください。もちろん、これを編集して、必要に応じて機能させることができます。
P粉1584737802024-03-31 00:32:02
これは vue 3 を使用した esm ビルドではありませんが、ブラウザで直接サポートされている UMD ビルドを引き続き使用しています (その理由は、vue-select ライブラリが esm ビルド バージョンを提供していないためですが、UMD ビルドは引き続きサポートされています) 。
基本的には次の方法で依存関係を含めます:
リーリー次に、vue を次のようにインポートします:
次に、vue-select コンポーネントを次のようにインポートします:
実用的なコード スニペット: