Comment implémenter les paramètres de couleur des nœuds et d'arrière-plan pour les cartes mentales à l'aide de Vue et jsmind ?

Comment utiliser Vue et jsmind pour définir la couleur du nœud et l'arrière-plan de la carte mentale ?

La cartographie mentale est un outil couramment utilisé pour enregistrer et organiser la pensée. Dans les applications pratiques, il est souvent nécessaire de définir différentes couleurs et arrière-plans pour les nœuds de la carte mentale en fonction de différents besoins. Cet article expliquera comment utiliser Vue et jsmind pour implémenter la couleur des nœuds et les paramètres d'arrière-plan des cartes mentales, et fournira des exemples de code pertinents.

1. Préparation
   Tout d'abord, nous devons introduire les bibliothèques liées à Vue et jsmind dans le projet. Elle peut être introduite des manières suivantes :

<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入jsmind -->
<script src="https://cdn.jsdelivr.net/npm/jsmind/dist/js/jsmind.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsmind/dist/style/jsmind.css">

De plus, nous devons également créer un élément div dans le projet pour placer la carte mentale. Par exemple : div元素用于放置思维导图。例如：

<div id="mind-container"></div>

2. 创建Vue实例
   接下来，我们需要创建一个Vue实例，用于管理思维导图的数据和操作。

var vm = new Vue({
  el: '#mind-container',
  data: {
    mind: null,
    selectedNodeId: null,
  },
  mounted() {
    // 在mounted钩子函数中初始化jsmind
    this.initMind();
  },
  methods: {
    // 初始化jsmind
    initMind() {
      // 创建一个新的jsmind实例
      this.mind = jsMind.show({
        container: 'mind-container',
        format: 'node_array',
        editable: true,
        theme: 'primary',
        default_event_type: 'click',
        view: {
          h_margin: 100,
          v_margin: 50,
        },
        layout: {
          hspace: 20,
          vspace: 10,
          pspace: 20,
        },
        shortcut: {
          enable: true,
        },
        context_menu: {
          enable: true,
        },
      });

      // 监听思维导图节点的选中事件
      this.mind.add_event_listener((type, data) => {
        if (type === 'select_node') {
          this.selectedNodeId = data[0].id;
        }
      });
    },
    // 设置节点颜色
    setNodeColor(color) {
      var node = this.mind.get_node(this.selectedNodeId);
      node.data.style = {
        'background-color': color,
      };
      this.mind.update_node(node.id, node);
    },
    // 设置节点背景
    setNodeBackground(background) {
      var node = this.mind.get_node(this.selectedNodeId);
      node.data.style = {
        'background-image': 'url(' + background + ')',
      };
      this.mind.update_node(node.id, node);
    }
  },
});

在上述代码中，我们创建了一个Vue实例，并在mounted钩子函数中初始化了jsmind。同时，我们定义了initMind方法用于初始化思维导图，监听思维导图节点的选中事件，以及setNodeColor和setNodeBackground

<div>
  <h2>节点设置</h2>
  <div>
    <label for="color-picker">节点颜色:</label>
    <input type="color" id="color-picker" v-model="color">
    <button @click="setNodeColor(color)">设置</button>
  </div>
  <div>
    <label for="background-input">节点背景:</label>
    <input type="text" id="background-input" v-model="background">
    <button @click="setNodeBackground(background)">设置</button>
  </div>
</div>

Créer une instance Vue
Ensuite, nous devons créer une instance Vue pour gérer les données et les opérations de la carte mentale.
3. 
   rrreee
Dans le code ci-dessus, nous avons créé une instance Vue et initialisé jsmind dans la fonction hook montée. Parallèlement, nous avons défini la méthode initMind pour initialiser la carte mentale et surveiller l'événement de sélection du nœud de la carte mentale, ainsi que les méthodes setNodeColor et . Méthodes setNodeBackground Utilisées pour définir la couleur et l'arrière-plan des nœuds.
Affichage du code de page et des effets

Enfin, ajoutez les boutons et sélecteurs de couleur correspondants à la page pour permettre aux utilisateurs de sélectionner plus facilement la couleur et l'arrière-plan du nœud. Par exemple :

🎜rrreee🎜Grâce au code ci-dessus, nous avons implémenté une page avec un sélecteur de couleur et une zone de saisie d'arrière-plan. L'utilisateur peut définir la couleur et l'arrière-plan du nœud de la carte mentale en sélectionnant la couleur et en saisissant l'URL de l'image. 🎜🎜Pour résumer, nous avons présenté comment utiliser Vue et jsmind pour implémenter les paramètres de couleur des nœuds et d'arrière-plan de la carte mentale. Grâce aux exemples de code ci-dessus, nous pouvons facilement définir différentes couleurs et arrière-plans pour les nœuds de la carte mentale afin de répondre aux besoins spécifiques de l'entreprise. 🎜

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!