Comment implémenter des composants déplaçables dans la documentation Vue

Vue est un framework JavaScript open source très populaire qui fournit une multitude de composants et d'outils pour simplifier le développement front-end. Un composant particulièrement utile est le composant déplaçable. Cet article présentera l'implémentation de composants déplaçables dans les documents Vue.

Vue fournit un plug-in appelé draggable pour implémenter des fonctionnalités de glisser. Ce plug-in peut ajouter des fonctionnalités déplaçables à n'importe quel élément de Vue et prend en charge des fonctionnalités avancées telles que le tri facultatif et la limitation de la plage de mouvement lors du glissement.

Dans cet article, nous utiliserons Vue-cli et npm pour créer et gérer des projets. Vue-cli est un outil d'échafaudage Vue officiellement fourni qui peut créer rapidement des applications basées sur Vue.

Tout d'abord, exécutez la commande suivante dans la ligne de commande pour installer Vue-cli :

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

Ensuite, nous créerons un nouveau projet Vue en utilisant Vue-cli :

vue init webpack glisser-déposer

Cette commande utilisera webpack comme outil de construction pour créer un nouveau projet Vue nommé glisser-déposer. Pendant cette période, vous pouvez choisir d'installer ou non d'autres extensions telles que vue-router et ESLint.

Une fois l'installation terminée, vous pouvez utiliser la commande suivante pour entrer dans le répertoire où se trouve le projet :

glisser-déposer cd

Ensuite, nous devons installer le plug déplaçable -in :

npm install vuedraggable<p></p>Cela installera la dernière version du plugin draggable. <p></p>Nous pouvons désormais utiliser des plugins déplaçables dans les composants Vue. Pour montrer comment utiliser les composants déplaçables, nous allons créer une application simple contenant une liste de tâches. Les utilisateurs peuvent réorganiser la liste des tâches en faisant glisser les tâches. <p></p>Ouvrez le fichier src/components/TodoList.vue et ajoutez le code suivant : <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;h2&amp;gt;待办事项列表&amp;lt;/h2&amp;gt; &amp;lt;draggable v-model=&amp;quot;tasks&amp;quot;&amp;gt; &amp;lt;div v-for=&amp;quot;(task,index) in tasks&amp;quot; :key=&amp;quot;index&amp;quot;&amp;gt; &amp;lt;input type=&amp;quot;checkbox&amp;quot; v-model=&amp;quot;task.completed&amp;quot;&amp;gt; &amp;lt;span&amp;gt;{{ task.title }}&amp;lt;/span&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/draggable&amp;gt; &amp;lt;button @click=&amp;quot;addTask()&amp;quot;&amp;gt;添加任务&amp;lt;/button&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;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, }); }, }, }; &amp;lt;/script&amp;gt;</pre><div class="contentsignin">Copier après la connexion</div></div></p>Ce composant définit une carte qui contient notre liste de tâches. Nous utilisons des composants déplaçables pour rendre chaque tâche déplaçable. <p></p>Dans cet exemple, nous utilisons la directive v-model pour lier le tableau de tâches. Cela signifie que nous pouvons réorganiser ce tableau en faisant glisser les tâches, modifiant ainsi l'ordre des tâches. <p></p>Nous pouvons également voir un bouton "Ajouter une tâche". Cliquer sur ce bouton ajoutera une nouvelle tâche au tableau des tâches. 🎜🎜Nous avons également utilisé l'attribut calculé pour calculer le nombre de tâches inachevées. 🎜🎜Enfin, nous devons ajouter le composant TodoList à notre application. 🎜🎜Ouvrez le fichier src/App.vue et ajoutez le code suivant : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&amp;lt;template&amp;gt; &amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;TodoList /&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; import TodoList from '@/components/TodoList'; export default { name: 'App', components: { TodoList, } }; &amp;lt;/script&amp;gt;</pre><div class="contentsignin">Copier après la connexion</div></div>🎜Ce composant définit notre application et ajoute le composant TodoList à la page. 🎜🎜Félicitations, vous avez réussi à créer une liste de tâches qui peut être triée par glisser-déposer avec Vue. 🎜🎜Les plugins Vue-cli et déplaçables sont des outils puissants pour créer de puissantes applications Vue. Cependant, il convient de noter que cet article ne fournit qu'un exemple de base. Si vous souhaitez utiliser la fonctionnalité glisser-déposer de Vue dans des applications réelles, vous devrez l'appliquer et la modifier pour répondre à vos besoins. 🎜</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!