徐烜 / bsth-ebus-h5_editor · Commits

Commit e429da4a67beb572f3dd421f6c0a9063be7d8e05

Authored by ly525
1 parent 51f21d79

refactor props panel for Collapse; 重构props panel, 准备将通用属性放到折叠面板中

Inline Side-by-side
Showing 1 changed file with 56 additions and 45 deletions
front-end/h5/src/components/core/editor/edit-panel/props.js
  View file @e429da4
... ... @@ -49,6 +49,60 @@ export default {
49 49 this.$options.components[key] = components[key]
50 50 }
51 51 },
  52 + /**
  53 + *
  54 + * propKey: e.g:'color'
  55 + * propConfig: {
  56 + * editor: {},
  57 + * default: 'red'
  58 + * }
  59 + */
  60 + renderPropFormItem (h, { propKey, propConfig }) {
  61 + const editingElement = this.editingElement
  62 + const item = propConfig.editor
  63 + // https://vuejs.org/v2/guide/render-function.html
  64 + const data = {
  65 + // style: { width: '100%' },
  66 + props: {
  67 + ...item.prop || {},
  68 + // https://vuejs.org/v2/guide/render-function.html#v-model
  69 +
  70 + // #!zh:不设置默认值的原因（下一行的代码，注释的代码）：
  71 + // 比如表单 input，如果用户手动删除了 placeholder的内容，程序会用defaultPropValue填充，
  72 + // 表现在UI上就是：用户永远无法彻底删掉默认值（必须保留至少一个字符）
  73 + // value: editingElement.pluginProps[propKey] || item.defaultPropValue
  74 +
  75 + // https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
  76 + [item.type === 'a-switch' ? 'checked' : 'value']: editingElement.pluginProps[propKey]
  77 + },
  78 + on: {
  79 + // https://vuejs.org/v2/guide/render-function.html#v-model
  80 + // input (e) {
  81 + // editingElement.pluginProps[propKey] = e.target ? e.target.value : e
  82 + // }
  83 + change (e) {
  84 + // TODO fixme: update plugin props in vuex with dispatch
  85 + editingElement.pluginProps[propKey] = e.target ? e.target.value : e
  86 + }
  87 + }
  88 + }
  89 + const formItemLayout = this.layout === 'horizontal' ? {
  90 + labelCol: { span: 6 }, wrapperCol: { span: 16, offset: 2 }
  91 + } : {}
  92 + const formItemData = {
  93 + props: {
  94 + ...formItemLayout,
  95 + label: item.label
  96 + }
  97 + }
  98 + return (
  99 + <a-form-item {...formItemData}>
  100 + {/* extra: 操作补充说明 */}
  101 + { item.extra && <div slot="extra">{typeof item.extra === 'function' ? item.extra(h) : item.extra}</div>}
  102 + { h(item.type, data) }
  103 + </a-form-item>
  104 + )
  105 + },
52 106 renderPropsEditorPanel (h, editingElement) {
53 107 const vm = getVM(editingElement.name)
54 108 const props = vm.$options.props
... ... @@ -72,51 +126,8 @@ export default {
72 126 {
73 127 Object
74 128 .entries(props)
75   - .filter(([propKey, obj]) => obj.editor && !obj.editor.custom)
76   - .map(([propKey, obj]) => {
77   - const item = obj.editor
78   - // https://vuejs.org/v2/guide/render-function.html
79   - const data = {
80   - // style: { width: '100%' },
81   - props: {
82   - ...item.prop || {},
83   - // https://vuejs.org/v2/guide/render-function.html#v-model
84   -
85   - // #!zh:不设置默认值的原因（下一行的代码，注释的代码）：
86   - // 比如表单 input，如果用户手动删除了 placeholder的内容，程序会用defaultPropValue填充，
87   - // 表现在UI上就是：用户永远无法彻底删掉默认值（必须保留至少一个字符）
88   - // value: editingElement.pluginProps[propKey] || item.defaultPropValue
89   -
90   - // https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
91   - [item.type === 'a-switch' ? 'checked' : 'value']: editingElement.pluginProps[propKey]
92   - },
93   - on: {
94   - // https://vuejs.org/v2/guide/render-function.html#v-model
95   - // input (e) {
96   - // editingElement.pluginProps[propKey] = e.target ? e.target.value : e
97   - // }
98   - change (e) {
99   - // TODO fixme: update plugin props in vuex with dispatch
100   - editingElement.pluginProps[propKey] = e.target ? e.target.value : e
101   - }
102   - }
103   - }
104   - const formItemLayout = this.layout === 'horizontal' ? {
105   - labelCol: { span: 6 }, wrapperCol: { span: 16, offset: 2 }
106   - } : {}
107   - const formItemData = {
108   - props: {
109   - ...formItemLayout,
110   - label: item.label
111   - }
112   - }
113   - return (
114   - <a-form-item {...formItemData}>
115   - { item.extra && <div slot="extra">{typeof item.extra === 'function' ? item.extra(h) : item.extra}</div>}
116   - { h(item.type, data) }
117   - </a-form-item>
118   - )
119   - })
  129 + .filter(([propKey, propConfig]) => propConfig.editor && !propConfig.editor.custom)
  130 + .map(([propKey, propConfig]) => this.renderPropFormItem(h, { propKey, propConfig }))
120 131 }
121 132 </a-form>
122 133 )
... ...