Comment utiliser Vue et jsmind pour faire glisser et redimensionner les nœuds de la carte mentale ?

Comment utiliser Vue et jsmind pour faire glisser et redimensionner les nœuds de la carte mentale ?

À l'ère moderne d'Internet, la cartographie mentale est devenue un outil largement utilisé pour permettre aux gens d'organiser et de clarifier diverses informations. Dans cet article, nous présenterons comment utiliser la bibliothèque Vue et jsmind pour implémenter les fonctions glisser-déposer et redimensionner des nœuds de carte mentale.

Tout d'abord, assurez-vous que les bibliothèques Vue et jsmind ont été installées. Les deux peuvent être installés via npm. Exécutez la commande suivante dans la ligne de commande pour installer :

npm install vue jsmind

Une fois l'installation terminée, nous pouvons créer un composant Vue pour afficher la carte mentale. Dans le modèle de Vue, nous pouvons utiliser l'API fournie par jsmind pour générer et restituer des cartes mentales. Voici un exemple de composant Vue de base :

<template>
  <div ref="mindContainer"></div>
</template>

<script>
import jsMind from 'jsmind';

export default {
  mounted() {
    // 创建思维导图实例
    const mind = jsMind.init({
      container: 'mindContainer',
      editable: true,
      default_event_handle: {
        enable_mousedown_handle: true,
        enable_click_handle      : true,
        enable_select_handle     : true,
      },
    });

    // 添加根节点
    const rootNode = mind.addRootNode('思维导图');

    // 添加子节点
    const childNode = mind.addChildren(rootNode, '子节点1');
    mind.addChildren(childNode, '子节点1.1');
    mind.addChildren(childNode, '子节点1.2');

    // 渲染思维导图
    mind.show();
  },
}
</script>

Dans le code ci-dessus, nous avons d'abord introduit la bibliothèque jsmind et créé une instance jsMind dans le hook de cycle de vie monté de Vue. Dans cet exemple, nous spécifions le conteneur dans lequel la carte mentale est rendue et si la modification est autorisée. Ensuite, nous avons ajouté le nœud racine et les nœuds enfants, et finalement appelé la méthode mind.show() pour restituer la carte mentale. mind.show()方法来渲染思维导图。

接下来，我们希望为思维导图节点添加拖拽和调整大小的功能。jsmind库提供了一些API来实现这些功能。我们可以通过调用mind.enableDrag(true)启用拖拽功能，通过调用mind.enableResize(true)启用调整大小功能。下面是修改后的代码示例：

<template>
  <div ref="mindContainer"></div>
</template>

<script>
import jsMind from 'jsmind';

export default {
  mounted() {
    const mind = jsMind.init({
      container: 'mindContainer',
      editable: true,
      default_event_handle: {
        enable_mousedown_handle: true,
        enable_click_handle      : true,
        enable_select_handle     : true,
      },
    });

    const rootNode = mind.addRootNode('思维导图');
    const childNode = mind.addChildren(rootNode, '子节点1');
    mind.addChildren(childNode, '子节点1.1');
    mind.addChildren(childNode, '子节点1.2');

    // 启用节点拖拽和调整大小功能
    mind.enableDrag(true);
    mind.enableResize(true);

    mind.show();
  },
}
</script>

通过将mind.enableDrag(true)和mind.enableResize(true)

Ensuite, nous espérons ajouter des fonctions de glisser et de redimensionnement aux nœuds de la carte mentale. La bibliothèque jsmind fournit quelques API pour implémenter ces fonctions. Nous pouvons activer la fonction glisser en appelant mind.enableDrag(true) et activer la fonction de redimensionnement en appelant mind.enableResize(true). Voici l'exemple de code modifié :

rrreee

En ajoutant mind.enableDrag(true) et mind.enableResize(true) au code, nous avons réussi à activer le glisser-déplacer et le redimensionnement de l'esprit. fonctions pour les nœuds de carte. 🎜🎜En résumé, nous avons implémenté les fonctions glisser-déposer et redimensionner des nœuds de carte mentale via les bibliothèques Vue et jsmind. Ces fonctionnalités sont très utiles pour les utilisateurs et aident les gens à mieux organiser et clarifier leur réflexion. Bien entendu, en plus du glisser et du redimensionnement, jsmind fournit également de nombreuses autres fonctions, telles que la copie de nœuds, l'édition de style, etc., que les lecteurs peuvent développer et personnaliser selon leurs besoins. J'espère que cet article sera utile à tout le monde ! 🎜

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!