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)

rrreee

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!