- 安装
$ 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')
- 使用
示例代码
- 安装
$ 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>
属性 |
说明 |
类型 |
默认值 |
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 |
事件 |
说明 |
回调参数 |
content-change |
新增/编辑/删除时触发事件 |
所有节点数据 |
node-change |
新增/编辑时触发事件,其中新增返回的节点 id 为 0 |
当前节点数据 |
node-remove |
删除时触发事件 |
当前节点数据 |
selection-change |
当前选中的节点 |
当前节点数据 |
template-change |
变更模板时触发 |
当前模板标识名 |
theme-change |
变更主题时触发 |
当前主题标识名 |
- 安装依赖
- 运行
MIT