前端写思维导图之vue-jsMind用法

项目是用vue写的,他这个vue版本的文档不全...

github地址:https://github.com/chentoday/vue-jsmind (vue版本)

1.安装

yarn add vue-jsmind #or npm install vue-jsmind

2.main引入

import jm from 'vue-jsmind'
Vue.use(jm)
**********注意**********
if (window.jsMind) {
  console.log('wind')
  Vue.prototype.jsMind = window.jsMind
}

3.使用

注意:宽度一定要有,不然不显示

    <js-mind :values="mind" :options="options" v-show="isShow" ref="jsMind" height="600px"></js-mind>

4:部分功能展示demo,我把代码全部写上面了,

<template>
  <div>
    <el-button @click='zoomOut' ref="zoomOut">缩小</el-button>
    <el-button @click='zoomIn' ref="zoomIn">放大</el-button>
    <el-button @click="addNode">添加节点</el-button>
    <el-button @click="onRemoveNode">删除节点</el-button>
    <el-button @click="bgColor">背景颜色</el-button>
      <el-button @click='changeOption'>改变布局方向</el-button>
    <span>主题：</span>
    <el-select @change="set_theme" v-model="theme_value">
      <el-option value="">default</el-option>
      <el-option value="primary">primary</el-option>
      <el-option value="warning">warning</el-option>
      <el-option value="danger">danger</el-option>
      <el-option value="success">success</el-option>
      <el-option value="info">info</el-option>
      <el-option value="greensea" selected="selected">greensea</el-option>
      <el-option value="nephrite">nephrite</el-option>
      <el-option value="belizehole">belizehole</el-option>
      <el-option value="wisteria">wisteria</el-option>
      <el-option value="asphalt">asphalt</el-option>
      <el-option value="orange">orange</el-option>
      <el-option value="pumpkin">pumpkin</el-option>
      <el-option value="pomegranate">pomegranate</el-option>
      <el-option value="clouds">clouds</el-option>
      <el-option value="asbestos">asbestos</el-option>
    </el-select>
    <el-button @click="onClouds">按钮</el-button>
    <js-mind :values="mind" :options="options" v-show="isShow" ref="jsMind" height="600px"></js-mind>

    <el-drawer
    size="1000px"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
       <el-tree
      :data="treeData"
      show-checkbox
      :props="defaultProps"></el-tree>
    </el-drawer>
  </div>
</template>

<script>
import { selectCase } from '@/common/api/caseInformation'
// import { uuid } from '@/utils'
export default {
  data () {
    return {
      drawer: false,
      direction: 'rtl',
      theme_value: '',
      mind: {
        meta: {
          name: 'jsMind remote',
          author: 'hizzgdev@163.com',
          version: '0.2'
        },
        format: 'node_tree',
        data: {
          id: 'root',
          topic: 'jsMind',
          children: [
            {
              id: 'easy',
              topic: 'Easy',
              direction: 'left',
              expanded: false,
              children: [
                { id: 'easy1', topic: 'Easy to show' },
                { id: 'easy2', topic: 'Easy to edit' },
                { id: 'easy3', topic: 'Easy to store' },
                { id: 'easy4', topic: 'Easy to embed' }
              ]
            },
            {
              id: 'open',
              topic: 'Open Source',
              direction: 'right',
              expanded: true,
              children: [
                { id: 'open1', topic: 'on GitHub' },
                { id: 'open2', topic: 'BSD License' }
              ]
            },
            {
              id: 'powerful',
              topic: 'Powerful',
              direction: 'right',
              children: [
                { id: 'powerful1', topic: 'Base on Javascript' },
                { id: 'powerful2', topic: 'Base on HTML5' },
                { id: 'powerful3', topic: 'Depends on you' }
              ]
            },
            {
              id: 'other',
              topic: 'test node',
              direction: 'left',
              children: [
                { id: 'other1', topic: "I'm from local variable" },
                { id: 'other2', topic: 'I can do everything' }
              ]
            }
          ]
        }
      },
      options: {
        container: 'jsmind_container', // [必选] 容器的ID
        editable: false, // [可选] 是否启用编辑
        theme: 'orange' // [可选] 主题
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      isShow: true
    }
  },
  methods: {
    // 缩小
    zoomOut () {
      if (this.jm.view.zoomOut()) {
        this.$refs.zoomOut.disabled = false
      } else {
        this.$refs.zoomOut.disabled = true
      }
    },
    // 放大
    zoomIn () {
      if (this.jm.view.zoomIn()) {
        this.$refs.zoomIn.disabled = false
      } else {
        this.$refs.zoomIn.disabled = true
      }
    },
    // 新增节点
    addNode () {
      var selectedNode = this.jm.get_selected_node() // as parent of new node
      console.log('selected_node', selectedNode)
      if (!selectedNode) { alert('请先选择一个节点'); return }
      console.log(this.jsMind)
      var nodeid = this.jsMind.util.uuid.newid()
      var topic = 'new Node'
      this.jm.add_node(selectedNode, nodeid, topic)
    },
    // 删除节点
    onRemoveNode () {
      var selectedId = this.get_selected_nodeid()
      console.log(selectedId)
      if (!selectedId) { alert('请先选择一个节点'); return }
      this.jm.remove_node(selectedId)
    },
    // 改变节点背景颜色
    bgColor () {
      var selectedId = this.get_selected_nodeid()
      if (!selectedId) { alert('please select a node first.'); return }
      this.jm.set_node_color(selectedId, '#DC143C', null)
    },
    // 布局方向
    changeOption () {
      this.options = {
        mode: 'side'
      }
    },
    onClouds () {
      this.drawer = true
      console.log('mind:', this.jm.get_meta())
      console.log('45444:', this.jm.get_data())
    },
    // 选择主题颜色
    set_theme () {
      this.jm.set_theme(this.theme_value)
    },
    // 获取选中标签的 ID
    get_selected_nodeid () {
      var selectedNode = this.jm.get_selected_node()
      if (selectedNode) {
        return selectedNode.id
      } else {
        return null
      }
    }
  },
  async created () {
    const reqBody = {
      caseNumber: 'lerui'
    }
    const { code, data } = await selectCase(reqBody)
    if (code === 0) {
      this.treeData = data
    }
  },
  mounted () {
    this.jm = this.$refs.jsMind.jm
    this.jm.enable_edit()
  }
}
</script>

<style>

</style>