Avec le développement d'Internet, de plus en plus d'applications nécessitent la production d'organigrammes, tels que des organigrammes de flux de travail, des schémas de circuits, etc. En tant que framework frontal très populaire, Vue.js offre une excellente interactivité et maintenabilité, il est donc largement utilisé pour créer des applications d'organigrammes complexes.
Cet article présentera comment utiliser Vue pour implémenter la production d'organigrammes, y compris les étapes suivantes :
Tout d'abord, nous devons installer la bibliothèque vue-draggable-resizing, qui est un plug-in Vue très facile à utiliser qui peut réaliser le glisser et fonctions de zoom des éléments. Nous pouvons utiliser l'installation npm :
npm install vue-draggable-resizable --save
Nous devons utiliser les composants Vue pour implémenter l'édition d'organigrammes. Nous devons créer un composant FlowChart qui contient tous les éléments de l'organigramme. Chaque nœud est un composant Node qui représente une étape dans l'organigramme. Les lignes de connexion sont des composants de connexion utilisés pour connecter différents nœuds.
Tout d'abord, nous devons créer un composant FlowChart abstrait dans le fichier FlowChart.vue pour contenir tous les nœuds et lignes de connexion :
Nous plaçons les nœuds et les lignes de connexion dans les deux emplacements du composant FlowChart respectivement.
Ensuite, nous devons créer des composants Node et Connection pour représenter les nœuds et les lignes de connexion de l'organigramme :
Node.vue :
Connection.vue :
Nous utilisons le composant vue-draggable-resizing pour implémenter Pour faire glisser et mettre à l'échelle les nœuds, la largeur, la hauteur, x, y et d'autres attributs du nœud doivent être transmis. La ligne de connexion est tracée à l'aide de l'élément path de SVG et le chemin doit être calculé en fonction de la position et de la taille du nœud.
Afin d'implémenter la fonction glisser-déposer des nœuds, nous devons ajouter des écouteurs d'événement v-on:drag, v-on:dragstop et v-on:resize dans le composant Node . Ils correspondent respectivement au glisser, à la fin du glisser et au redimensionnement du nœud :
Nous envoyons des événements au composant parent via la méthode $emit dans ces fonctions de gestion d'événements pour réaliser des mises à jour en temps réel de la position et de la taille du nœud. Dans le composant FlowChart, nous devons écouter ces événements et mettre à jour les informations du nœud :
Nous avons défini trois fonctions de gestion d'événements onNodeMove, onNodeEndMove et onNodeResize pour répondre au glissement, à la fin du glissement et au redimensionnement du nœud. La fonction connectNodes est utilisée pour connecter deux nœuds.
Dans le composant FlowChart, nous définissons une variable showConnection et deux variables start et end pour enregistrer les informations de la ligne de connexion. Nous devons mettre à jour ces informations via des événements de souris pour tracer la ligne de connexion.
Tout d'abord, nous devons ajouter l'écoute des événements v-on:mousedown et v-on:mouseup dans le composant Node. Ces événements sont utilisés pour détecter si l'utilisateur a sélectionné un nœud :
Nous envoyons un événement select au composant parent dans le gestionnaire d'événements onMouseDown pour sélectionner le nœud actuel. Dans le composant FlowChart, nous devons écouter cet événement :
Nous déterminons si le nœud de point de départ est actuellement sélectionné dans la fonction de gestionnaire d'événements onSelectNode, et si c'est le cas, connectons le nœud actuel, sinon, définissons le nœud actuel comme ; point de départ. Dans le gestionnaire d'événements onUnselectNode, désélectionnez le nœud et réinitialisez les informations de la ligne de connexion.
Afin d'implémenter l'édition de nœuds, nous devons ajouter un bouton d'édition dans Node.vue et écouter son événement de clic :
Ensuite, écoutez l'événement d'édition dans FlowChart.vue, et select Afficher une zone de saisie sur le nœud :
编辑节点
Nous avons ajouté this.selectedNode = null dans la fonction de gestionnaire d'événements onSelectNode pour masquer la zone d'édition du nœud. Dans le gestionnaire d'événements onEditNode, nous envoyons un événement d'édition au composant parent pour afficher une zone de saisie permettant de modifier le nœud sélectionné. Nous enregistrons les informations modifiées du nœud dans la fonction de gestionnaire d'événements saveNode.
Enfin, nous pouvons ajouter un bouton d'exportation dans FlowChart.vue pour exporter l'organigramme actuel au format JSON :
...
