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メソッドの例

推薦する

M1 ProチップでVueプロジェクトを開始する方法

目次導入Homebrewをインストールするnvmをインストールするノードをインストールするインストー...

AWS無料サーバーアプリケーションとネットワークプロキシ設定チュートリアルの詳細な説明

目次予防必要条件AWSアカウントを申請する仮想マシンの申請と有効化仮想マシンを申請するセキュリティグ...

Nginx で複数のドメイン名がドメインをまたいでアクセスできるようにマップを使用する方法

一般的なNginx構成ではクロスドメインが可能 サーバー{ 11111 を聞いてください。 serv...

Linux システムで Java 環境変数を設定する方法

Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...

Dockerfile における ENV 命令の具体的な使用法の詳細な説明

1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...

JavaScript 日付ツールの概要

ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

Linux での stat 関数と stat コマンドの使用法の詳細な説明

stat 関数と stat コマンドLinux ファイル内の [inode = インデックス ノード...

docker runとstartの違い

docker における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...

CSSで半透明の背景色を実現する2つの方法について簡単に説明します。

ページをレイアウトする際、ユーザーに異なる視覚効果を与えるために、div の背景色を半透明の状態に設...

MySQL 全文あいまい検索 MATCH AGAINST メソッドの例

MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...

ドロップダウンメニューを実現するためのHTML+CSS

1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...

MySQL ビューの原則分析

目次更新可能なビュービューのパフォーマンスビューの制限ビューは MySQL 5.0 以降で導入されま...