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 の他の関連記事に注目してください。