add script editor panel

ly525
1 parent 525072e0
Showing 3 changed files with 98 additions and 4 deletions
front-end/h5/src/components/core/editor/edit-panel/action.js
front-end/h5/src/components/core/editor/edit-panel/script.js
front-end/h5/src/components/core/editor/index.js
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  data: () => ({
+  }),
+  computed: {
+    ...mapState('element', {
+      editingElement: state => state.editingElement
+    })
+  },
+  methods: {
+    ...mapActions('element', [
+      'setEditingElement' // -> this.foo()
+    ])
+  },
+  created () {},
+  render (h) {
+    const ele = this.editingElement
+    if (!ele) return (<span>请先选择一个元素</span>)
+    return (<div>
+      TODO
+    </div>)
+  }
+}
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  data: () => ({
+    editorContent: `return {
+      editorMethods: {              // 此项配置自定义方法的在组件配置面板如何展示
+        projectJump1: {             // 方法名，对应于 methods 内的某方法
+          label: '外部跳转1',        // 自定义方法显示名
+          params: [                 // 参数列表，对象数组
+            {
+              label: '跳转地址',     // 参数1的名称
+              desc: '项目相对地址',   // 参数1的描述
+              type: 'string',       // 参数1的类型，支持string|number|boolean|array|object
+              default: ''           // 参数1默认值
+            },
+            {
+              label: '参数',
+              desc: 'query形式参数',
+              type: 'object',
+              default: {}
+            }
+          ]
+        }
+      },
+      methods:{
+        projectJump1:function(url, query){
+          console.log(url, query)
+          let win = window.open(url, '_blank')
+          win.focus()
+        }
+      }
+    }`
+  }),
+  computed: {
+    ...mapState('element', {
+      editingElement: state => state.editingElement
+    })
+  },
+  methods: {
+    ...mapActions('element', [
+      'setEditingElement' // -> this.foo()
+    ]),
+    mixinScript () {
+      // TODO mixin script
+    }
+  },
+  render (h) {
+    const ele = this.editingElement
+    if (!ele) return (<span>请先选择一个元素</span>)
+    return <div>
+      <a-button onClick={this.mixinScript} disabled>使用脚本</a-button>
+      <div style={{ margin: '20px' }}></div>
+      <a-textarea
+        rows={12}
+        placeholder="Basic usage"
+        value={this.editorContent}
+        onChange={(e) => {
+          this.editorContent = e.target.value
+        }}
+      />
+    </div>
+  }
+}
@@ -8,6 +8,8 @@ import &#39;../styles/index.scss&#39;
 import RenderEditCanvas from './canvas/edit'
 import RenderPreviewCanvas from './canvas/preview'
 import RenderPropsEditor from './edit-panel/props'
+import RenderScriptEditor from './edit-panel/script'
+import RenderActoionEditor from './edit-panel/action'
 import RenderShortcutsPanel from './shortcuts-panel/index'
  
 const sidebarMenus = [
@@ -34,7 +36,8 @@ export default {
     activeMenuKey: 'pluginList',
     pages: [],
     // elements: [],
-    isPreviewMode: false
+    isPreviewMode: false,
+    activeTabKey: '属性'
   }),
   computed: {
     ...mapState('element', {
@@ -137,7 +140,11 @@ export default {
             </a-layout-content>
           </a-layout>
           <a-layout-sider width="340" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
-            <a-tabs style="height: 100%;" tabBarGutter={10}>
+            <a-tabs
+              style="height: 100%;"
+              tabBarGutter={10}
+              onChange={activeTabKey => { this.activeTabKey = activeTabKey }}
+            >
               {/*
                 #!zh tab 标题：
                 #!en tab title
@@ -153,8 +160,8 @@ export default {
                 <RenderPropsEditor/>
               </a-tab-pane>
               <a-tab-pane label="动画" key='动画' tab='动画'>动画</a-tab-pane>
-              <a-tab-pane label="动作" key='动作' tab='动作'>动作</a-tab-pane>
-              <a-tab-pane label="脚本" key='脚本' tab='脚本'>脚本</a-tab-pane>
+              <a-tab-pane label="动作" key='动作' tab='动作'>{this.activeTabKey === '动作'}{ this.activeTabKey === '动作' && <RenderActoionEditor/> }</a-tab-pane>
+              <a-tab-pane label="脚本" key='脚本' tab='脚本'><RenderScriptEditor/></a-tab-pane>
             </a-tabs>
           </a-layout-sider>
         </a-layout>