@orh/vue-kityminder

Vue kityminder

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

Vue 3.x

1. 安装

$ yarn add @orh/vue-kityminder@2

2. 引入

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

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

3. 使用

示例代码

Vue 2.x

1. 安装

$ yarn add @orh/vue-kityminder@1

2. 引入

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	变更主题时触发	当前主题标识名

• 删除按钮绑定的是双击事件

本地开发/预览

1. 安装依赖

$ yarn

2. 运行

$ yarn serve

License

MIT