Demo：一些耗时的操作添加loading

web/src/pages/Edit/components/BaseStyle.vue

@@ -857,6 +857,7 @@ export default {
         this.style[key] = value
       }
       this.data.theme.config[key] = value
+      this.$bus.$emit('showLoading')
       this.mindMap.setThemeConfig(this.data.theme.config)
       storeConfig({
         theme: {

web/src/pages/Edit/components/Edit.vue

@@ -69,6 +69,7 @@ import Search from './Search.vue'
 import NodeIconSidebar from './NodeIconSidebar.vue'
 import NodeIconToolbar from './NodeIconToolbar.vue'
 import OutlineEdit from './OutlineEdit.vue'
+import { showLoading, hideLoading } from '@/utils/loading'
 
 // 注册插件
 MindMap
@@ -120,6 +121,7 @@ export default {
   },
   data() {
     return {
+      enableShowLoading: true,
       mindMap: null,
       mindMapData: null,
       prevImg: '',
@@ -143,6 +145,7 @@ export default {
     }
   },
   mounted() {
+    showLoading()
     // this.showNewFeatureInfo()
     this.getData()
     this.init()
@@ -162,11 +165,27 @@ export default {
     this.$bus.$on('startPainter', () => {
       this.mindMap.painter.startPainter()
     })
+    this.$bus.$on('node_tree_render_end', this.handleHideLoading)
+    this.$bus.$on('showLoading', this.handleShowLoading)
     window.addEventListener('resize', () => {
       this.mindMap.resize()
     })
   },
   methods: {
+    // 显示loading
+    handleShowLoading() {
+      this.enableShowLoading = true
+      showLoading()
+    },
+
+    // 渲染结束后关闭loading
+    handleHideLoading() {
+      if (this.enableShowLoading) {
+        this.enableShowLoading = false
+        hideLoading()
+      }
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-07-03 22:11:37
@@ -315,6 +334,7 @@ export default {
      * @Desc: 动态设置思维导图数据
      */
     setData(data) {
+      this.handleShowLoading()
       if (data.root) {
         this.mindMap.setFullData(data)
       } else {

web/src/pages/Edit/components/Theme.vue

@@ -136,6 +136,7 @@ export default {
     },
 
     useTheme(theme) {
+      if (theme.value === this.theme) return
       this.theme = theme.value
       this.handleDark()
       const customThemeConfig = this.mindMap.getCustomThemeConfig()
@@ -159,6 +160,7 @@ export default {
     },
 
     changeTheme(theme, config) {
+      this.$bus.$emit('showLoading')
       this.mindMap.setTheme(theme.value)
       storeConfig({
         theme: {

web/src/utils/loading.js

@@ -0,0 +1,17 @@
+import { Loading } from 'element-ui'
+
+let loadingInstance = null
+
+export const showLoading = () => {
+  loadingInstance = Loading.service({
+    lock: true
+  })
+}
+
+export const hideLoading = () => {
+    if (loadingInstance) {
+        loadingInstance.close()
+        loadingInstance = null
+    }
+  }
+