So implementieren Sie ziehbare Komponenten in der Vue-Dokumentation

Vue ist ein sehr beliebtes Open-Source-JavaScript-Framework, das eine Fülle von Komponenten und Tools zur Vereinfachung der Frontend-Entwicklung bietet. Eine besonders nützliche Komponente ist die ziehbare Komponente. In diesem Artikel wird die Implementierung ziehbarer Komponenten in Vue-Dokumenten vorgestellt.

Vue bietet ein Plug-in namens Draggable zur Implementierung von Ziehfunktionen. Dieses Plug-in kann jedem Element in Vue ziehbare Funktionen hinzufügen und unterstützt erweiterte Funktionen wie optionales Sortieren und Begrenzen des Bewegungsbereichs beim Ziehen.

In diesem Artikel verwenden wir Vue-cli und npm, um Projekte zu erstellen und zu verwalten. Vue-cli ist ein offiziell bereitgestelltes Vue-Gerüsttool, mit dem schnell Vue-basierte Anwendungen erstellt werden können.

Führen Sie zunächst den folgenden Befehl in der Befehlszeile aus, um Vue-cli zu installieren:

npm install -g vue-clinpm install -g vue-cli

接下来，我们将使用Vue-cli创建一个新的Vue项目：

vue init webpack drag-and-drop

这个命令将使用webpack作为构建工具，创建一个名为drag-and-drop的新Vue项目。在此期间，您可以选择是否安装vue-router、ESLint等其他扩展功能。

安装完成后，可以使用以下命令进入项目所在目录：

cd drag-and-drop

接下来，我们需要安装draggable插件：

npm install vuedraggable

Als nächstes erstellen wir ein neues Vue-Projekt mit Vue-cli:

vue init webpack Drag-and-Drop

Dieser Befehl verwendet Webpack als Build-Tool, um ein neues Vue-Projekt mit dem Namen Drag-and-Drop zu erstellen. Während dieses Zeitraums können Sie wählen, ob Sie andere Erweiterungen wie vue-router und ESLint installieren möchten.

Nachdem die Installation abgeschlossen ist, können Sie mit dem folgenden Befehl das Verzeichnis eingeben, in dem sich das Projekt befindet:

cd Drag-and-Drop

Als nächstes müssen wir den ziehbaren Plug installieren -in:

npm install vuedraggable<p></p>Dadurch wird die neueste Version des ziehbaren Plugins installiert. <p></p>Jetzt können wir ziehbare Plugins in Vue-Komponenten verwenden. Um zu demonstrieren, wie ziehbare Komponenten verwendet werden, erstellen wir eine einfache Anwendung, die eine Aufgabenliste enthält. Benutzer können die Aufgabenliste durch Ziehen von Aufgaben neu anordnen. <p></p>Öffnen Sie die Datei src/components/TodoList.vue und fügen Sie den folgenden Code hinzu: <p><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;h2&gt;待办事项列表&lt;/h2&gt; &lt;draggable v-model=&quot;tasks&quot;&gt; &lt;div v-for=&quot;(task,index) in tasks&quot; :key=&quot;index&quot;&gt; &lt;input type=&quot;checkbox&quot; v-model=&quot;task.completed&quot;&gt; &lt;span&gt;{{ task.title }}&lt;/span&gt; &lt;/div&gt; &lt;/draggable&gt; &lt;button @click=&quot;addTask()&quot;&gt;添加任务&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import draggable from 'vuedraggable'; export default { name: 'TodoList', components: { draggable, }, data() { return { tasks: [ { title: '完成Vue项目', completed: false }, { title: '阅读Vue文档', completed: true }, { title: '学习JavaScript', completed: false }, ], }; }, methods: { addTask() { this.tasks.push({ title: '新增任务', completed: false, }); }, }, }; &lt;/script&gt;</pre></p>Diese Komponente definiert eine Karte, die unsere Aufgabenliste enthält. Wir verwenden ziehbare Komponenten, um jede Aufgabe ziehbar zu machen. <p></p>In diesem Beispiel verwenden wir die V-Model-Direktive, um das Task-Array zu binden. Das bedeutet, dass wir dieses Array durch Ziehen von Aufgaben neu anordnen und so die Reihenfolge der Aufgaben ändern können. <p></p>Wir können auch eine Schaltfläche „Aufgabe hinzufügen“ sehen. Wenn Sie auf diese Schaltfläche klicken, wird eine neue Aufgabe zum Aufgabenarray hinzugefügt. 🎜🎜Wir haben das berechnete Attribut auch verwendet, um die Anzahl der nicht erledigten Aufgaben zu berechnen. 🎜🎜Schließlich müssen wir die TodoList-Komponente zu unserer Anwendung hinzufügen. 🎜🎜Öffnen Sie die Datei src/App.vue und fügen Sie den folgenden Code hinzu: 🎜<pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div id=&quot;app&quot;&gt; &lt;TodoList /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import TodoList from '@/components/TodoList'; export default { name: 'App', components: { TodoList, } }; &lt;/script&gt;</pre>🎜Diese Komponente definiert unsere Anwendung und fügt der Seite die TodoList-Komponente hinzu. 🎜🎜Herzlichen Glückwunsch, Sie haben mit Vue erfolgreich eine To-Do-Liste erstellt, die per Drag-and-Drop sortiert werden kann. 🎜🎜Vue-CLI und ziehbare Plugins sind leistungsstarke Tools zum Erstellen leistungsstarker Vue-Anwendungen. Es ist jedoch zu beachten, dass dieser Artikel nur ein einfaches Beispiel darstellt. Wenn Sie die Drag-and-Drop-Funktion von Vue in tatsächlichen Anwendungen verwenden möchten, müssen Sie sie anwenden und an Ihre Anforderungen anpassen. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ziehbare Komponenten in der Vue-Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!