当前位置：首页 > article >正文

jsmind 思维导出 vue 示例

article 2024/11/14 1:00:27

在线文档：

https://hizzgdev.github.io/jsmind/docs/zh/get-started/

yarn add jsmind

List.vue:

<template>
  <div>
    <div id="jsmind_container" style="width: 800px; height: 500px"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind'

const handleInit = () => {
  var mind = {
    meta: {
      name: 'example',
      author: 'hizzgdev',
      version: '0.2'
    },
    format: 'node_tree',
    data: {
      id: 'root',
      topic: 'jsMind',
      children: [
        { id: 'sub1', topic: 'sub1' },
        { id: 'sub2', topic: 'sub2' }
      ]
    }
  }
  var options = {
    container: 'jsmind_container',
    theme: 'primary',
    editable: true
  }
  var jm = new jsMind(options)
  jm.show(mind)
}

onMounted(() => {
  handleInit()
})
</script>

env.d.ts:

/// <reference types="vite/client" />

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

declare module 'jsmind';