From be2d3eb792ef8939e96ed01a645678c886dc46e5 Mon Sep 17 00:00:00 2001 From: ly525 Date: Wed, 15 Jan 2020 01:06:22 +0800 Subject: [PATCH] fix: #132 #134 --- .../core/editor/edit-panel/background.js | 15 +-- .../core/editor/edit-panel/props.js | 28 +++-- .../h5/src/components/core/models/element.js | 22 +--- .../src/components/plugins/lbp-form-button.js | 76 ++++++------ .../src/components/plugins/lbp-form-input.js | 112 +++++++++--------- .../h5/src/components/plugins/lbp-slide.js | 4 +- .../h5/src/components/plugins/lbp-video.js | 6 +- front-end/h5/src/store/modules/editor.js | 1 - front-end/h5/src/store/modules/element.js | 11 +- front-end/h5/src/utils/element.js | 30 ++++- 10 files changed, 155 insertions(+), 150 deletions(-) diff --git a/front-end/h5/src/components/core/editor/edit-panel/background.js b/front-end/h5/src/components/core/editor/edit-panel/background.js index 75527ab1..dbb687c4 100644 --- a/front-end/h5/src/components/core/editor/edit-panel/background.js +++ b/front-end/h5/src/components/core/editor/edit-panel/background.js @@ -2,7 +2,7 @@ * @Author: ly525 * @Date: 2019-12-01 18:11:49 * @LastEditors : ly525 - * @LastEditTime : 2019-12-22 18:09:54 + * @LastEditTime : 2020-01-15 01:03:31 * @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 @@ -23,14 +23,11 @@ export default { ]) }, render () { - return - }, - created () { - const bgElement = this.editingPage.elements.find(e => e.name === 'lbp-background') - this.setEditingElement(bgElement) - }, - beforeDestroy () { - this.setEditingElement() + const bgEle = this.editingPage.elements.find(e => e.name === 'lbp-background') + return } } diff --git a/front-end/h5/src/components/core/editor/edit-panel/props.js b/front-end/h5/src/components/core/editor/edit-panel/props.js index 399bf725..218ab7f2 100644 --- a/front-end/h5/src/components/core/editor/edit-panel/props.js +++ b/front-end/h5/src/components/core/editor/edit-panel/props.js @@ -1,6 +1,6 @@ import Vue from 'vue' import { mapState, mapActions } from 'vuex' -import { getVM } from '../../../../utils/element' +import { getVM, getComponentsForPropsEditor } from '../../../../utils/element' export default { data: () => ({ @@ -10,12 +10,22 @@ export default { layout: { type: String, default: 'horizontal' + }, + // 优先级更高的当前编辑元素 + realEditingElement: { + type: Object, + default: () => null } }, computed: { - ...mapState('editor', ['editingElement', 'editingElementEditorConfig']), + ...mapState('editor', { + stateEditingElement: state => state.editingElement + }), customEditorName () { return `${this.editingElement.name}-custom-editor` + }, + editingElement () { + return this.realEditingElement || this.stateEditingElement } }, methods: { @@ -42,11 +52,10 @@ export default { * 将插件属性的 自定义增强编辑器注入 属性编辑面板中 */ mixinEnhancedPropsEditor (editingElement) { - if (!this.editingElementEditorConfig || !this.editingElementEditorConfig.components) return - const { components } = this.editingElementEditorConfig - for (const key in components) { + if (!this.componentsForPropsEditor) return + for (const key in this.componentsForPropsEditor) { if (this.$options.components[key]) return - this.$options.components[key] = components[key] + this.$options.components[key] = this.componentsForPropsEditor[key] } }, /** @@ -81,7 +90,7 @@ export default { // editingElement.pluginProps[propKey] = e.target ? e.target.value : e // } change (e) { - // TODO fixme: update plugin props in vuex with dispatch + // TODO fixme: update plugin props in vuex with dispatch editingElement.pluginProps[propKey] = e.target ? e.target.value : e } } @@ -140,6 +149,9 @@ export default { return this.renderPropsEditorPanel(h, ele) }, created () { - window.getEditorApp.$on('setEditingElement', this.loadCustomEditorForPlugin) + window.getEditorApp.$on('setEditingElement', (ele) => { + this.loadCustomEditorForPlugin() + this.componentsForPropsEditor = getComponentsForPropsEditor(ele.name) + }) } } diff --git a/front-end/h5/src/components/core/models/element.js b/front-end/h5/src/components/core/models/element.js index d1cacfdb..75521d83 100644 --- a/front-end/h5/src/components/core/models/element.js +++ b/front-end/h5/src/components/core/models/element.js @@ -31,42 +31,28 @@ class Element { * 3. 为何需要 clone，因为会有 element.clone() 以及 page.clone()， * element.pluginProps 和 elementcommonStyle 是引用类型，如果不做 deep_clone 可能会出现意外错误 */ - this.pluginProps = (typeof ele.pluginProps === 'object' && cloneObj({ ...ele.pluginProps, uuid: this.uuid })) || this.getDefaultPluginProps(ele.editorConfig || {}) + this.pluginProps = (typeof ele.pluginProps === 'object' && cloneObj({ ...ele.pluginProps, uuid: this.uuid })) || this.getDefaultPluginProps(ele.props || {}) this.commonStyle = (typeof ele.commonStyle === 'object' && cloneObj(ele.commonStyle)) || { ...defaultStyle, zindex: ele.zindex } this.events = [] this.animations = ele.animations || [] } // init prop of plugin - getDefaultPluginProps (propsConfig) { + getDefaultPluginProps (props) { const pluginProps = { uuid: this.uuid } - Object.keys(propsConfig).forEach(key => { + Object.keys(props).forEach(key => { // #6 if (key === 'name') { console.warn('Please do not use {name} as plugin prop') return } - const defaultValue = propsConfig[key].default + const defaultValue = props[key].default pluginProps[key] = typeof defaultValue === 'function' ? defaultValue() : defaultValue }) return pluginProps } - // getDefaultPluginProps (editorConfig) { - // // init prop of plugin - // const propConf = editorConfig.propsConfig - // const pluginProps = {} - // Object.keys(propConf).forEach(key => { - // // #6 - // if (key === 'name') { - // console.warn('Please do not use {name} as plugin prop') - // return - // } - // pluginProps[key] = propConf[key].defaultPropValue - // }) - // return pluginProps - // } getStyle ({ position = 'static', isRem = false } = {}) { if (this.name === 'lbp-background') { diff --git a/front-end/h5/src/components/plugins/lbp-form-button.js b/front-end/h5/src/components/plugins/lbp-form-button.js index 1361203e..5a24281a 100644 --- a/front-end/h5/src/components/plugins/lbp-form-button.js +++ b/front-end/h5/src/components/plugins/lbp-form-button.js @@ -75,21 +75,20 @@ export default { req.send(formData) } }, - editorConfig: { - components: { - 'lbs-select-input-type': { - props: ['value'], - computed: { - value_: { - get () { - return this.value - }, - set (val) { - this.$emit('input', val) - } + componentsForPropsEditor: { + 'lbs-select-input-type': { + props: ['value'], + computed: { + value_: { + get () { + return this.value + }, + set (val) { + this.$emit('input', val) } - }, - template: ` + } + }, + template: ` `, - data: () => ({ - options: [ - { - label: '文字', - value: 'text' - }, - { - label: '密码', - value: 'password' - }, - { - label: '日期', - value: 'date' - }, - { - label: '邮箱', - value: 'email' - }, - { - label: '手机号', - value: 'tel' - } - ] - }) - } + data: () => ({ + options: [ + { + label: '文字', + value: 'text' + }, + { + label: '密码', + value: 'password' + }, + { + label: '日期', + value: 'date' + }, + { + label: '邮箱', + value: 'email' + }, + { + label: '手机号', + value: 'tel' + } + ] + }) } } } diff --git a/front-end/h5/src/components/plugins/lbp-form-input.js b/front-end/h5/src/components/plugins/lbp-form-input.js index cc1859e2..f086694e 100644 --- a/front-end/h5/src/components/plugins/lbp-form-input.js +++ b/front-end/h5/src/components/plugins/lbp-form-input.js @@ -54,66 +54,64 @@ export default { lineHeight: commonProps.lineHeight, textAlign: commonProps.textAlign({ defaultValue: 'left' }) }, - editorConfig: { - components: { - 'lbs-select-input-type': { - props: ['value'], - computed: { - value_: { - get () { - return this.value - }, - set (val) { - this.$emit('input', val) - } + componentsForPropsEditor: { + 'lbs-select-input-type': { + props: ['value'], + computed: { + value_: { + get () { + return this.value + }, + set (val) { + this.$emit('input', val) } - }, - render (h) { - return ( - { - this.$emit('input', value) - this.$emit('change', value) - }} - > - { - this.options.map(option => ( - {option.label} - )) - } - - ) - }, - data: () => ({ - options: [ - { - label: '文字', - value: 'text' - }, - { - label: '密码', - value: 'password' - }, - { - label: '日期', - value: 'date' - }, + } + }, + render (h) { + return ( + { + this.$emit('input', value) + this.$emit('change', value) + }} + > { - label: '邮箱', - value: 'email' - }, - { - label: '手机号', - value: 'tel' + this.options.map(option => ( + {option.label} + )) } - ] - }) - } + + ) + }, + data: () => ({ + options: [ + { + label: '文字', + value: 'text' + }, + { + label: '密码', + value: 'password' + }, + { + label: '日期', + value: 'date' + }, + { + label: '邮箱', + value: 'email' + }, + { + label: '手机号', + value: 'tel' + } + ] + }) } } } diff --git a/front-end/h5/src/components/plugins/lbp-slide.js b/front-end/h5/src/components/plugins/lbp-slide.js index 387a5faf..17aa0049 100644 --- a/front-end/h5/src/components/plugins/lbp-slide.js +++ b/front-end/h5/src/components/plugins/lbp-slide.js @@ -57,9 +57,7 @@ export default { } } }, - editorConfig: { - components: { - } + componentsForPropsEditor: { }, mounted () { }, diff --git a/front-end/h5/src/components/plugins/lbp-video.js b/front-end/h5/src/components/plugins/lbp-video.js index 4108a1d8..64926313 100644 --- a/front-end/h5/src/components/plugins/lbp-video.js +++ b/front-end/h5/src/components/plugins/lbp-video.js @@ -2,7 +2,7 @@ * @Author: ly525 * @Date: 2019-12-01 18:11:50 * @LastEditors : ly525 - * @LastEditTime : 2020-01-13 00:31:39 + * @LastEditTime : 2020-01-15 00:53:48 * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-video.js * @Github: https://github.com/ly525/luban-h5 * @Description: Do not edit @@ -96,8 +96,6 @@ export default { ) }, - editorConfig: { - components: { - } + componentsForPropsEditor: { } } diff --git a/front-end/h5/src/store/modules/editor.js b/front-end/h5/src/store/modules/editor.js index 26a45119..1e8832f7 100644 --- a/front-end/h5/src/store/modules/editor.js +++ b/front-end/h5/src/store/modules/editor.js @@ -9,7 +9,6 @@ const state = { work: new Work(), editingPage: { elements: [] }, editingElement: null, - editingElementEditorConfig: null, formDetailOfWork: { uuidMap2Name: {}, formRecords: [] diff --git a/front-end/h5/src/store/modules/element.js b/front-end/h5/src/store/modules/element.js index 48a34c8b..b233c180 100644 --- a/front-end/h5/src/store/modules/element.js +++ b/front-end/h5/src/store/modules/element.js @@ -1,14 +1,10 @@ import Element from '../../components/core/models/element' -import { getEditorConfigForEditingElement, swapZindex, getVM } from '../../utils/element' +import { swapZindex, getVM } from '../../utils/element' // actions export const actions = { setEditingElement ({ commit }, payload) { commit('setEditingElement', payload) - - const vm = (payload && payload.name) ? getEditorConfigForEditingElement(payload.name) : null - commit('setEditingElementEditorConfig', vm) - payload && window.getEditorApp.$emit('setEditingElement', payload) }, setElementPosition ({ commit }, payload) { @@ -30,9 +26,6 @@ export const mutations = { setEditingElement (state, payload) { state.editingElement = payload }, - setEditingElementEditorConfig (state, payload) { - state.editingElementEditorConfig = payload - }, setElementCommonStyle (state, payload) { state.editingElement.commonStyle = { ...state.editingElement.commonStyle, @@ -54,7 +47,7 @@ export const mutations = { ...value, zindex: len + 1 } - const element = new Element({ name, editorConfig: props }) + const element = new Element({ name, props }) elements.push(element) break case 'copy': diff --git a/front-end/h5/src/utils/element.js b/front-end/h5/src/utils/element.js index 6483bd42..627bf69c 100644 --- a/front-end/h5/src/utils/element.js +++ b/front-end/h5/src/utils/element.js @@ -3,10 +3,36 @@ import Vue from 'vue' const DESIGN_DRAFT_WIDTH = 320 const styleKey = 'commonStyle' -export function getEditorConfigForEditingElement (elementName) { +/** + * + + * 获取组件中的 「componentsForPropsEditor」对象 + * @param {String} elementName + * + * 可以查看下面的组件 Demo + { + name: 'lbp-button', + props: { + color: { + default: 'red', + editor: { + type: 'custom-color-editor' + } + } + }, + componentsForPropsEditor: { + 'custom-color-editor': { + render() { + return + } + } + } + } + */ +export function getComponentsForPropsEditor (elementName) { const Ctor = Vue.component(elementName) // TODO 为何直接 return new Ctor() 并将其赋值给 vuex 的 state 会报错：Cannot convert a Symbol value to a string - return new Ctor().$options.editorConfig + return new Ctor().$options.componentsForPropsEditor } export function getVM (pluginName) {