0.7.5 • Published 2 years ago
ch-vue3-mindmap v0.7.5
ch-vue3-mindmap
Mindmap component for Vue3. Fork from https://github.com/hellowuxin/vue3-mindmap/
Install
npm install ch-vue3-mindmapPROPS
| Name | Type | Default | Description | ||
|---|---|---|---|---|---|
| v-model | Data[] | undefined | 设置思维导图数据 | ||
| x-gap | Number | 84 | 设置节点横向间隔 | ||
| y-gap | Number | 18 | 设置节点纵向间隔 | ||
| branch | Number | 4 | 设置连线的宽度 | ||
| scale-extent | Number, Number | 0.1, 0.8 | 设置缩放范围 | ||
| timetravel | Boolean | false | 是否显示撤销重做按钮 | ||
| drag | Boolean | false | 设置节点是否可拖拽 | ||
| zoom | Boolean | false | 是否可缩放、拖移 | ||
| edit | Boolean | false | 是否可编辑 | ||
| center-btn | Boolean | false | 是否显示居中按钮 | ||
| fit-btn | Boolean | false | 是否显示缩放按钮 | ||
| add-node-btn | Boolean | false | 是否显示添加节点按钮 | ||
| download-btn | Boolean | false | 是否显示下载按钮 | ||
| sharp-corner | Boolean | false | 设置分支为圆角或直角 | ||
| ctm | Boolean | false | 是否响应右键菜单 | ||
| locale | 'zh' \ | 'en' \ | 'ptBR' | 'zh' | i18n |
Example
<template>
<mindmap v-model="data"></mindmap>
</template>
<script>
import mindmap from 'ch-vue3-mindmap'
export default defineComponent({
components: {mindmap},
setup ()
=>
{
const data = [{
"name": "Computer programming",
"children": [
{
"name": "Web",
"children": [
{"name": "HTML & CSS"},
{"name": "JavaScript"},
]
},
{
"name": "Windows",
"collapse": true,
"children": [{"name": "C#"}]
},
{"name": "Other", "left": true},
]
}]
return {data}
}
})
</script>