Skip to content

Commit be2d3eb

Browse files
ly525ly525
committed
fix: #132 #134 
1 parent b2c9bc4 commit be2d3eb

File tree

10 files changed

+155
-150
lines changed

10 files changed

+155
-150
lines changed

‎front-end/h5/src/components/core/editor/edit-panel/background.js

+6-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @Author: ly525
33
* @Date: 2019-12-01 18:11:49
44
* @LastEditors : ly525
5-
* @LastEditTime : 2019-12-22 18:09:54
5+
* @LastEditTime : 2020-01-15 01:03:31
66
* @FilePath: /luban-h5/front-end/h5/src/components/core/editor/edit-panel/background.js
77
* @Github: https://github.com/ly525/luban-h5
88
* @Description: Do not edit
@@ -23,14 +23,11 @@ export default {
2323
])
2424
},
2525
render () {
26-
return <propsEditPanel layout="vertical" />
27-
},
28-
created () {
29-
const bgElement = this.editingPage.elements.find(e => e.name === 'lbp-background')
30-
this.setEditingElement(bgElement)
31-
},
32-
beforeDestroy () {
33-
this.setEditingElement()
26+
const bgEle = this.editingPage.elements.find(e => e.name === 'lbp-background')
27+
return <propsEditPanel
28+
layout="vertical"
29+
realEditingElement={bgEle}
30+
/>
3431
}
3532

3633
}

‎front-end/h5/src/components/core/editor/edit-panel/props.js

+20-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22
import { mapState, mapActions } from 'vuex'
3-
import { getVM } from '../../../../utils/element'
3+
import { getVM, getComponentsForPropsEditor } from '../../../../utils/element'
44

55
export default {
66
data: () => ({
@@ -10,12 +10,22 @@ export default {
1010
layout: {
1111
type: String,
1212
default: 'horizontal'
13+
},
14+
// 优先级更高的当前编辑元素
15+
realEditingElement: {
16+
type: Object,
17+
default: () => null
1318
}
1419
},
1520
computed: {
16-
...mapState('editor', ['editingElement', 'editingElementEditorConfig']),
21+
...mapState('editor', {
22+
stateEditingElement: state => state.editingElement
23+
}),
1724
customEditorName () {
1825
return `${this.editingElement.name}-custom-editor`
26+
},
27+
editingElement () {
28+
return this.realEditingElement || this.stateEditingElement
1929
}
2030
},
2131
methods: {
@@ -42,11 +52,10 @@ export default {
4252
* 将插件属性的 自定义增强编辑器注入 属性编辑面板中
4353
*/
4454
mixinEnhancedPropsEditor (editingElement) {
45-
if (!this.editingElementEditorConfig || !this.editingElementEditorConfig.components) return
46-
const { components } = this.editingElementEditorConfig
47-
for (const key in components) {
55+
if (!this.componentsForPropsEditor) return
56+
for (const key in this.componentsForPropsEditor) {
4857
if (this.$options.components[key]) return
49-
this.$options.components[key] = components[key]
58+
this.$options.components[key] = this.componentsForPropsEditor[key]
5059
}
5160
},
5261
/**
@@ -81,7 +90,7 @@ export default {
8190
// editingElement.pluginProps[propKey] = e.target ? e.target.value : e
8291
// }
8392
change (e) {
84-
// TODO fixme: update plugin props in vuex with dispatch
93+
// TODO fixme: update plugin props in vuex with dispatch
8594
editingElement.pluginProps[propKey] = e.target ? e.target.value : e
8695
}
8796
}
@@ -140,6 +149,9 @@ export default {
140149
return this.renderPropsEditorPanel(h, ele)
141150
},
142151
created () {
143-
window.getEditorApp.$on('setEditingElement', this.loadCustomEditorForPlugin)
152+
window.getEditorApp.$on('setEditingElement', (ele) => {
153+
this.loadCustomEditorForPlugin()
154+
this.componentsForPropsEditor = getComponentsForPropsEditor(ele.name)
155+
})
144156
}
145157
}

‎front-end/h5/src/components/core/models/element.js

+4-18
Original file line numberDiff line numberDiff line change
@@ -31,42 +31,28 @@ class Element {
3131
* 3. 为何需要 clone，因为会有 element.clone() 以及 page.clone()，
3232
* element.pluginProps 和 elementcommonStyle 是引用类型，如果不做 deep_clone 可能会出现意外错误
3333
*/
34-
this.pluginProps = (typeof ele.pluginProps === 'object' && cloneObj({ ...ele.pluginProps, uuid: this.uuid })) || this.getDefaultPluginProps(ele.editorConfig || {})
34+
this.pluginProps = (typeof ele.pluginProps === 'object' && cloneObj({ ...ele.pluginProps, uuid: this.uuid })) || this.getDefaultPluginProps(ele.props || {})
3535
this.commonStyle = (typeof ele.commonStyle === 'object' && cloneObj(ele.commonStyle)) || { ...defaultStyle, zindex: ele.zindex }
3636
this.events = []
3737
this.animations = ele.animations || []
3838
}
3939

4040
// init prop of plugin
41-
getDefaultPluginProps (propsConfig) {
41+
getDefaultPluginProps (props) {
4242
const pluginProps = {
4343
uuid: this.uuid
4444
}
45-
Object.keys(propsConfig).forEach(key => {
45+
Object.keys(props).forEach(key => {
4646
// #6
4747
if (key === 'name') {
4848
console.warn('Please do not use {name} as plugin prop')
4949
return
5050
}
51-
const defaultValue = propsConfig[key].default
51+
const defaultValue = props[key].default
5252
pluginProps[key] = typeof defaultValue === 'function' ? defaultValue() : defaultValue
5353
})
5454
return pluginProps
5555
}
56-
// getDefaultPluginProps (editorConfig) {
57-
// // init prop of plugin
58-
// const propConf = editorConfig.propsConfig
59-
// const pluginProps = {}
60-
// Object.keys(propConf).forEach(key => {
61-
// // #6
62-
// if (key === 'name') {
63-
// console.warn('Please do not use {name} as plugin prop')
64-
// return
65-
// }
66-
// pluginProps[key] = propConf[key].defaultPropValue
67-
// })
68-
// return pluginProps
69-
// }
7056

7157
getStyle ({ position = 'static', isRem = false } = {}) {
7258
if (this.name === 'lbp-background') {

‎front-end/h5/src/components/plugins/lbp-form-button.js

+37-39
Original file line numberDiff line numberDiff line change
@@ -75,21 +75,20 @@ export default {
7575
req.send(formData)
7676
}
7777
},
78-
editorConfig: {
79-
components: {
80-
'lbs-select-input-type': {
81-
props: ['value'],
82-
computed: {
83-
value_: {
84-
get () {
85-
return this.value
86-
},
87-
set (val) {
88-
this.$emit('input', val)
89-
}
78+
componentsForPropsEditor: {
79+
'lbs-select-input-type': {
80+
props: ['value'],
81+
computed: {
82+
value_: {
83+
get () {
84+
return this.value
85+
},
86+
set (val) {
87+
this.$emit('input', val)
9088
}
91-
},
92-
template: `
89+
}
90+
},
91+
template: `
9392
<a-select v-model="value_" placeholder="类型">
9493
<a-option
9594
v-for="item in options"
@@ -99,31 +98,30 @@ export default {
9998
</a-option>
10099
</a-select>
101100
`,
102-
data: () => ({
103-
options: [
104-
{
105-
label: '文字',
106-
value: 'text'
107-
},
108-
{
109-
label: '密码',
110-
value: 'password'
111-
},
112-
{
113-
label: '日期',
114-
value: 'date'
115-
},
116-
{
117-
label: '邮箱',
118-
value: 'email'
119-
},
120-
{
121-
label: '手机号',
122-
value: 'tel'
123-
}
124-
]
125-
})
126-
}
101+
data: () => ({
102+
options: [
103+
{
104+
label: '文字',
105+
value: 'text'
106+
},
107+
{
108+
label: '密码',
109+
value: 'password'
110+
},
111+
{
112+
label: '日期',
113+
value: 'date'
114+
},
115+
{
116+
label: '邮箱',
117+
value: 'email'
118+
},
119+
{
120+
label: '手机号',
121+
value: 'tel'
122+
}
123+
]
124+
})
127125
}
128126
}
129127
}

‎front-end/h5/src/components/plugins/lbp-form-input.js

+55-57
Original file line numberDiff line numberDiff line change
@@ -54,66 +54,64 @@ export default {
5454
lineHeight: commonProps.lineHeight,
5555
textAlign: commonProps.textAlign({ defaultValue: 'left' })
5656
},
57-
editorConfig: {
58-
components: {
59-
'lbs-select-input-type': {
60-
props: ['value'],
61-
computed: {
62-
value_: {
63-
get () {
64-
return this.value
65-
},
66-
set (val) {
67-
this.$emit('input', val)
68-
}
57+
componentsForPropsEditor: {
58+
'lbs-select-input-type': {
59+
props: ['value'],
60+
computed: {
61+
value_: {
62+
get () {
63+
return this.value
64+
},
65+
set (val) {
66+
this.$emit('input', val)
6967
}
70-
},
71-
render (h) {
72-
return (
73-
<a-select
74-
placeholder="类型"
75-
value={this.value}
76-
onChange={(value) => {
77-
this.$emit('input', value)
78-
this.$emit('change', value)
79-
}}
80-
>
81-
{
82-
this.options.map(option => (
83-
<a-select-option
84-
key={option.value}
85-
value={option.value}
86-
>{option.label}</a-select-option>
87-
))
88-
}
89-
</a-select>
90-
)
91-
},
92-
data: () => ({
93-
options: [
94-
{
95-
label: '文字',
96-
value: 'text'
97-
},
98-
{
99-
label: '密码',
100-
value: 'password'
101-
},
102-
{
103-
label: '日期',
104-
value: 'date'
105-
},
68+
}
69+
},
70+
render (h) {
71+
return (
72+
<a-select
73+
placeholder="类型"
74+
value={this.value}
75+
onChange={(value) => {
76+
this.$emit('input', value)
77+
this.$emit('change', value)
78+
}}
79+
>
10680
{
107-
label: '邮箱',
108-
value: 'email'
109-
},
110-
{
111-
label: '手机号',
112-
value: 'tel'
81+
this.options.map(option => (
82+
<a-select-option
83+
key={option.value}
84+
value={option.value}
85+
>{option.label}</a-select-option>
86+
))
11387
}
114-
]
115-
})
116-
}
88+
</a-select>
89+
)
90+
},
91+
data: () => ({
92+
options: [
93+
{
94+
label: '文字',
95+
value: 'text'
96+
},
97+
{
98+
label: '密码',
99+
value: 'password'
100+
},
101+
{
102+
label: '日期',
103+
value: 'date'
104+
},
105+
{
106+
label: '邮箱',
107+
value: 'email'
108+
},
109+
{
110+
label: '手机号',
111+
value: 'tel'
112+
}
113+
]
114+
})
117115
}
118116
}
119117
}

‎front-end/h5/src/components/plugins/lbp-slide.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,7 @@ export default {
5757
}
5858
}
5959
},
60-
editorConfig: {
61-
components: {
62-
}
60+
componentsForPropsEditor: {
6361
},
6462
mounted () {
6563
},

‎front-end/h5/src/components/plugins/lbp-video.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @Author: ly525
33
* @Date: 2019-12-01 18:11:50
44
* @LastEditors : ly525
5-
* @LastEditTime : 2020-01-13 00:31:39
5+
* @LastEditTime : 2020-01-15 00:53:48
66
* @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-video.js
77
* @Github: https://github.com/ly525/luban-h5
88
* @Description: Do not edit
@@ -96,8 +96,6 @@ export default {
9696
</div>
9797
)
9898
},
99-
editorConfig: {
100-
components: {
101-
}
99+
componentsForPropsEditor: {
102100
}
103101
}

‎front-end/h5/src/store/modules/editor.js

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const state = {
99
work: new Work(),
1010
editingPage: { elements: [] },
1111
editingElement: null,
12-
editingElementEditorConfig: null,
1312
formDetailOfWork: {
1413
uuidMap2Name: {},
1514
formRecords: []

0 commit comments

Comments
 (0)