@orh/vue-kityminder NPM

适用于 Vue 2/3 思维导图
基于 kityminder-core

demo

Vue 3.x

安装

$ yarn add @orh/vue-kityminder@2

引入

import { createApp } from 'vue';
import App from './App.vue';
import VueKityminder from '@orh/vue-kityminder';

createApp(App).use(VueKityminder).mount('#app')

使用

示例代码

Vue 2.x

安装

$ yarn add @orh/vue-kityminder@1

引入

import VueKityminder from '@orh/vue-kityminder';

Vue.use(VueKityminder);

使用

<vue-kityminder
    style="height: 600px"
    ref="kityminder"
    theme="classic"
    template="fish-bone"
    :value="val"
    :toolbar-status="toolbar"
    @content-change="handleContent"
    @node-change="handleNode"
    @node-remove="handleRemove"
    @selection-change="handleSelection"
>
</vue-kityminder>

Props

属性	说明	类型	默认值
`value`	数据格式	`String`	空
`theme`	主题	`String`	`fresh-blue`
`template`	模板	`String`	`filetree`
`toolbar-status`	工具栏的各项显示/隐藏	`Object`	{}

toolbar-status 选项列表，可根据需要选择性配置

选项	功能	类型	默认值
`show`	整个工具栏	`boolean`	`true`
`left`	左侧工具栏	`boolean`	`true`
`right`	右侧工具栏	`boolean`	`true`
`appendSiblingNode`	插入同级	`boolean`	`true`
`appendChildNode`	插入下级	`boolean`	`true`
`arrangeUp`	上移	`boolean`	`true`
`arrangeDown`	下移	`boolean`	`true`
`removeNode`	删除	`boolean`	`true`
`text`	文本框	`boolean`	`true`
`template`	模板	`boolean`	`true`
`theme`	主题	`boolean`	`true`
`hand`	模式	`boolean`	`true`
`resetLayout`	整理布局	`boolean`	`true`
`zoomOut`	缩小	`boolean`	`true`
`zoomIn`	放大	`boolean`	`true`

Events

事件	说明	回调参数
`content-change`	新增/编辑/删除时触发事件	所有节点数据
`node-change`	新增/编辑时触发事件，其中新增返回的节点 `id` 为 `0`	当前节点数据
`node-remove`	删除时触发事件	当前节点数据
`selection-change`	当前选中的节点	当前节点数据
`template-change`	变更模板时触发	当前模板标识名
`theme-change`	变更主题时触发	当前主题标识名