Vue.js ドラッグ可能なテキストボックスコンポーネントの使用方法の詳細な説明

Vue.js ドラッグ可能なテキストボックスコンポーネントの使用方法の詳細な説明

ドラッグ可能なテキスト ボックスでは、ユーザーはオプションをテキスト ボックスにドラッグすることで入力を確定できます。実際、これはコンボ ボックスのバリエーションであると言えます。 コンボボックスと比較すると、このコンポーネントを使用すると、ユーザーはすべてのオプションをより直感的に確認でき、複数の入力でオプションのセットを共有できます。 同様のコンポーネントは、3D Windrose App や Graph Maker App などの複数のアプリでも使用されています。

コンポーネントの登録

ドラッグ可能なテキスト ボックス コンポーネントを登録します (実際には、カプセル化されたコードのこの部分では Ctrl+C と Ctrl+V を押します)。

<script type="text/x-template" id="ドラッグアンドドロップテキストボックステンプレート">
…
</スクリプト>
<スクリプト>
Vue.component("ドラッグアンドドロップテキストボックス", {
 テンプレート: "#ドラッグアンドドロップテキストボックステンプレート",
…
</スクリプト>

コンポーネントの追加

ドラッグ可能なテキスト ボックス コンポーネントを追加するには、カスタム タグ<drag-and-drop-text-box></drag-and-drop-text-box>を直接使用します。

<ドラッグ アンド ドロップ テキスト ボックス :columns="列“ :input="入力"></ドラッグ アンド ドロップ テキスト ボックス>

ソースコード

ギットハブ

上記は、Vue.js ドラッグ可能なテキストボックス コンポーネントの詳細な説明です。Vue ドラッグ可能なテキストボックス コンポーネントの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue.js でドラッグ アンド ドロップ効果を実装する例
  • vue.js を使用してドラッグ アンド ドロップ機能を実装する方法

<<:  MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

>>:  プロセスのすべての情報を表示するLinuxメソッドの例

推薦する

リンクAの意味論、書き方、ベストプラクティス

リンク A のセマンティクス、ライティング スタイル、およびベスト プラクティス。私は JavaEy...

マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)

非常に大量のデータ(数百 GB)を計算する必要があったことはありますか?または、その内部を検索したり...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)

最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...

JS 開発効率を上げる4つの超実践的なヒント

目次1. 短絡判定2. オプション連鎖演算子 (?) 3. ヌル合体演算子 (??) 4. 終了関数...

PrometheusはGrafanaディスプレイを使用してMySQLを監視します

目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...

プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...

MacOS に MySQL 8.0 をインストールして MySQL にログインする方法

公式チュートリアルに従って、インストール パッケージをダウンロードし、[インストール] をクリックし...

Linux プロセス管理ツール スーパーバイザーのインストールと設定のチュートリアル

環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...

Nginx ソースコードのコンパイルとインストールのプロセス記録

rpm パッケージのインストールは比較的簡単なので、ここでは説明しません。ほとんどのオープンソース ...

VMwareを使用したPermeateレンジシステムのインストール手順の詳細説明

1. 背景私たちは時々社内研修を行っており、実験環境をよく利用しています。最初はdockerコンテナ...

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

antd pro に基づく SMS 認証コード ログイン機能 (プロセス分析)

目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...