install

npm install vue3-minder-editor --save

Usage

importmindEditorfrom'vue3-minder-editor';import{createApp}from'vue';constapp=createApp(App);app.component(mindEditor.name,mindEditor);

component

<template><minder-editorclass="minder-container":import-json="importJson":progress-enable="false":height="height":tags="tags":default-mold="defaultMode":language="language"@save="save"/><button@click="toggleL">切换语言</button></template><scriptsetuplang="ts">import{ref}from'vue';importminderEditorfrom'vue3-minder-editor';constimportJson={root:{data:{// 文本内容text:'vue3-minder-editor',// 标签resource:['模块1'],// 是否禁止修改// disable: true,// 默认展开或折叠，默认是展开的，collapse 可设为折叠// expandState: 'collapse',// 在 disable 为 true 的情况下，允许添加标签// tagEnable: true,// 在 disable 为 true 的情况下，允许删除节点// allowDelete: true,// 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高// allowDisabledTag: true,},// 子节点children:[{data:{text:'child1',// disable: true,expandState:'collapse',resource:['模块2'],},children:[{data:{text:'地图axxaaaa',disable:true,allowDelete:true,// tagEnable: true,// allowDisabledTag: true,resource:['模块12'],priority:3,},},],},{data:{text:'child2',},},],},template:'default',};constheight=500;constdefaultMode=3;consttags=['模块1','用例','前置条件','测试步骤','预期结果','备注'];constlanguage=ref(localStorage.getItem('minder-locale')||'zh-CN');functionsave(data:any){console.log(data);}functiontoggleL(){if(language.value==='zh-CN'){language.value='en-US';}else{language.value='zh-CN';}localStorage.setItem('minder-locale',language.value);}</script>

Build Setup

# install npm dependencies    npm install# serve with hot reload at localhost:8088    npm run dev# build for plugin with minification    npm run build# License    BSD-3-Clause License

国际化

给组件传入language属性即可，例：<minder-editor   :language="language"/>

Props

基础配置

importJson

height

disabled

defaultMold

启用配置

sequenceEnable

tagEnable

progressEnable

moveEnable

优先级配置

priorityCount

priorityStartWithZero

priorityPrefix

priorityDisableCheck

标签配置

tags

distinctTags

tagDisableCheck

tagEditCheck