Detaillierte Erklärung zur Verwendung der ziehbaren Textfeldkomponente von Vue.js

Das verschiebbare Textfeld ermöglicht es Benutzern, Eingaben zu bestätigen, indem sie Optionen in das Textfeld ziehen. Tatsächlich kann man sagen, dass es sich um eine Variante der Combobox handelt. Im Vergleich zur Combobox ermöglicht diese Komponente den Benutzern, alle Optionen intuitiver anzuzeigen, und mehrere Eingaben können einen Optionssatz gemeinsam nutzen. Ähnliche Komponenten wurden auch in mehreren Apps verwendet, beispielsweise in der 3D Windrose App und der Graph Maker App.

Registrieren von Komponenten

Registrieren Sie die ziehbare Textfeldkomponente (drücken Sie für diesen Teil des gekapselten Codes tatsächlich Strg+C und Strg+V).

<script type="text/x-template" id="Textfeld-Vorlage per Drag & Drop verschieben">
…
</Skript>
<Skript>
Vue.component("Drag-and-Drop-Textfeld", {
 Vorlage: "#Drag-and-Drop-Textfeld-Vorlage",
…
</Skript>

Komponenten hinzufügen

Verwenden Sie direkt das benutzerdefinierte Tag <drag-and-drop-text-box></drag-and-drop-text-box> , um eine verschiebbare Textfeldkomponente hinzuzufügen.

<Drag-and-Drop-Textfeld :columns="Spalten" :input="Eingabe"></Drag-and-Drop-Textfeld>

Quellcode

Github

Oben finden Sie eine ausführliche Erläuterung der ziehbaren Textfeldkomponente von Vue.js. Weitere Informationen zur ziehbaren Textfeldkomponente von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!