fix: do not set editingElement null if change tab(not background)

ly525
1 parent 1f3ed8a9
Showing 2 changed files with 31 additions and 10 deletions
front-end/h5/src/components/core/editor/edit-panel/background.js
front-end/h5/src/components/core/editor/index.js
+/*
+ * @Author: ly525
+ * @Date: 2019-12-01 18:11:49
+ * @LastEditors  : ly525
+ * @LastEditTime : 2019-12-22 18:09:54
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/edit-panel/background.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: Do not edit
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ */
 import propsEditPanel from './props.js'
+import { mapState, mapActions } from 'vuex'
 export default {
+  computed: {
+    ...mapState('editor', [
+      'editingPage'
+    ])
+  },
+  methods: {
+    ...mapActions('editor', [
+      'setEditingElement'
+    ])
+  },
   render () {
     return <propsEditPanel layout="vertical" />
+  },
+  created () {
+    const bgElement = this.editingPage.elements.find(e => e.name === 'lbp-background')
+    this.setEditingElement(bgElement)
+  },
+  beforeDestroy () {
+    this.setEditingElement()
   }
+
 }
@@ -111,7 +111,7 @@ export default {
   data: () => ({
     activeMenuKey: 'pluginList',
     isPreviewMode: false,
-    activeTabKey: 'background',
+    activeTabKey: '属性',
     previewVisible: false,
     scaleRate: 1
   }),
@@ -161,14 +161,6 @@ export default {
      */
     setActiveTab (activeTabKey) {
       this.activeTabKey = activeTabKey
-      switch (activeTabKey) {
-        case 'background':
-          const bgElement = this.elements.find(e => e.name === 'lbp-background')
-          this.setEditingElement(bgElement)
-          break
-        default:
-          this.setEditingElement()
-      }
     },
     _renderMenuContent () {
       return (
@@ -377,7 +369,7 @@ export default {
               <a-tab-pane label="动画" key='动画' tab={this.$t('editor.editPanel.tab.animation')}><RenderAnimationEditor /></a-tab-pane>
               <a-tab-pane label="动作" key='动作' tab={this.$t('editor.editPanel.tab.action')}>{ this.activeTabKey === '动作' && <RenderActoionEditor/> }</a-tab-pane>
               <a-tab-pane label="脚本" key='脚本' tab={this.$t('editor.editPanel.tab.script')}><RenderScriptEditor/></a-tab-pane>
-              <a-tab-pane label="背景" key='background' tab={this.$t('editor.editPanel.tab.background')}><RenderBackgroundEditor/></a-tab-pane>
+              <a-tab-pane label="背景" key='background' tab={this.$t('editor.editPanel.tab.background')}>{ this.activeTabKey === 'background' && <RenderBackgroundEditor/> }</a-tab-pane>
             </a-tabs>
           </a-layout-sider>