Feat: 增加脑图编辑器 demo

package.json

@@ -30,6 +30,7 @@
     "vue": "^2.6.14",
     "vue-fullscreen": "^2.6.1",
     "vue-grid-layout": "^2.4.0",
+    "vue-minder-editor-extended": "1.2.2",
     "vue-router": "^3.5.1",
     "vuex": "3"
   },

src/main.js

@@ -6,6 +6,7 @@ import App from './App.vue'
 import router from '@/router'
 import SvgIcon from '@/components/SvgIcon'
 import elTableSticky from '@cell-x/el-table-sticky'
+import vueMinderEditor from 'vue-minder-editor-extended'
 
 // register svg component globally
 Vue.component('SvgIcon', SvgIcon)
@@ -19,6 +20,7 @@ Vue.config.productionTip = false
 Vue.prototype.$fullRouter = router
 Vue.prototype.$homeRoute = router.options.routes.find(route => route.name === 'home')
 Vue.use(elTableSticky)
+Vue.use(vueMinderEditor)
 
 new Vue({
   router,

src/router.js

@@ -35,6 +35,12 @@ const routes = [
     meta: { description: 'icon 使用范例' },
     component: () => import(/* webpackChunkName: "icons" */ '@/views/icons'),
   },
+  {
+    path: '/minder-editor',
+    name: 'minderEditor',
+    meta: { description: '脑图编辑器 demo' },
+    component: () => import(/* webpackChunkName: "minderEditor" */ '@/views/minder-editor'),
+  },
   {
     path: '/sticky-fixed-col',
     name: 'stickyFixedCol',

src/views/minder-editor.vue

@@ -0,0 +1,68 @@
+<!-- 脑图编辑器 demo -->
+<template>
+  <div>
+    <minder-editor :progress-enable="false" :import-json="importJson" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MinderEditorDemo',
+  data() {
+    return {
+      importJson: {
+        // 节点数据
+        root: {
+          data: {
+            // 文本内容
+            text: 'vue-minder-editor-extended',
+            // 标签
+            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: 'child11',
+                    disable: true,
+                    resource: ['模块2']
+                  },
+                },
+                {
+                  data: {
+                    text: 'child12',
+                  }
+                }
+              ]
+            },
+            {
+              data: {
+                text: 'child2',
+              }
+            }
+          ]
+        },
+      },
+      tags:  ['模块1','模块2']
+    }
+  }
+}
+</script>

yarn.lock

@@ -7163,6 +7163,11 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     watchpack "^2.4.0"
 
+[email protected]:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/vue-minder-editor-extended/-/vue-minder-editor-extended-1.2.2.tgz#12751604eea6bb050ac0b04885979b17e22989f4"
+  integrity sha512-lt0zIBH649hn0GLfsFkIlHAGfbZfpTu53RzYLA7RwI2QKuooO8kutrv7Ru0kHNc3pfUp76xp0abV9cRGdAMsBw==
+
 vue-router@^3.5.1:
   version "3.6.5"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz"