徐烜 / bsth-ebus-h5_editor · Commits

Commit f809cdf8fdfa1fd7d1a1460c9ec1139713c16680

Authored by ly525
1 parent 509ba6e9

refactor: merge props config to props

Inline Side-by-side
Showing 12 changed files with 243 additions and 688 deletions
front-end/h5/src/components/plugins/common/editor-config-for-configurable-props.js deleted 100644 → 0
  View file @509ba6e
1   -export default {
2   - text: {
3   - type: 'a-input',
4   - label: '按钮文字',
5   - require: true,
6   - defaultPropValue: '按钮'
7   - },
8   - fontSize: {
9   - type: 'a-input-number',
10   - label: '字号(px)',
11   - require: true,
12   - prop: {
13   - step: 1,
14   - min: 12,
15   - max: 144
16   - },
17   - defaultPropValue: 14
18   - },
19   - color: {
20   - type: 'a-input',
21   - label: '文字颜色',
22   - // !#zh 为编辑组件指定 prop
23   - prop: {
24   - type: 'color'
25   - },
26   - require: true,
27   - defaultPropValue: 'black'
28   - },
29   - backgroundColor: {
30   - type: 'a-input', // lbs-color-picker
31   - label: '背景颜色',
32   - prop: {
33   - type: 'color'
34   - },
35   - require: true,
36   - defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
37   - },
38   - borderColor: {
39   - type: 'a-input', // lbs-color-picker
40   - label: '边框颜色',
41   - prop: {
42   - type: 'color'
43   - },
44   - require: true,
45   - defaultPropValue: '#eeeeee'
46   - },
47   - borderWidth: {
48   - type: 'a-input-number',
49   - label: '边框宽度(px)',
50   - require: true,
51   - prop: {
52   - step: 1,
53   - min: 1,
54   - max: 10
55   - },
56   - defaultPropValue: 1
57   - },
58   - borderRadius: {
59   - type: 'a-input-number',
60   - label: '圆角(px)',
61   - require: true,
62   - prop: {
63   - step: 0.1,
64   - min: 0,
65   - max: 10
66   - },
67   - defaultPropValue: 0
68   - },
69   - lineHeight: {
70   - type: 'a-input-number',
71   - label: '行高',
72   - require: true,
73   - prop: {
74   - step: 0.1,
75   - min: 0.1,
76   - max: 10
77   - },
78   - defaultPropValue: 1
79   - }
80   -}
front-end/h5/src/components/plugins/common/props.js
  View file @f809cdf
1 1 export default {
2   - text: {
  2 + text: ({ defaultValue = '按钮', label = '按钮文字' } = {}) => ({
3 3 type: String,
4   - default: '按钮'
5   - },
  4 + default: defaultValue,
  5 + editor: {
  6 + type: 'a-input',
  7 + label,
  8 + require: true
  9 + }
  10 + }),
6 11 type: {
7 12 type: String,
8   - default: 'radio'
  13 + default: 'text'
9 14 },
10   - // placeholder: {
11   - // type: String,
12   - // default: '请填写提示文字',
13   - // editor: {
14   - // type: 'a-input',
15   - // label: '提示文字',
16   - // require: true
17   - // }
18   - // },
  15 + placeholder: ({ defaultValue = '请填写提示文字' } = {}) => ({
  16 + type: String,
  17 + default: defaultValue,
  18 + editor: {
  19 + type: 'a-input',
  20 + label: '提示文字',
  21 + require: true
  22 + }
  23 + }),
19 24 required: {
20 25 type: Boolean,
21 26 default: false
... ... @@ -117,13 +122,13 @@ export default {
117 122 require: true
118 123 }
119 124 },
120   - textAlign: {
  125 + textAlign: ({ defaultValue = 'center' } = {}) => ({
121 126 type: String,
122   - default: 'center',
  127 + default: defaultValue,
123 128 editor: {
124 129 type: 'lbs-text-align',
125 130 label: '文字对齐',
126 131 require: true
127 132 }
128   - }
  133 + })
129 134 }
... ...
front-end/h5/src/components/plugins/lbp-button.js
  View file @f809cdf
... ... @@ -33,15 +33,7 @@ export default {
33 33 },
34 34 name: 'lbp-button',
35 35 props: {
36   - text: {
37   - type: String,
38   - default: '按钮',
39   - editor: {
40   - type: 'a-input',
41   - label: '按钮文字',
42   - require: true
43   - }
44   - },
  36 + text: commonProps.text(),
45 37 vertical: commonProps.vertical,
46 38 backgroundColor: commonProps.backgroundColor,
47 39 color: commonProps.color,
... ... @@ -50,7 +42,7 @@ export default {
50 42 borderWidth: commonProps.borderWidth,
51 43 borderRadius: commonProps.borderRadius,
52 44 borderColor: commonProps.borderColor,
53   - textAlign: commonProps.textAlign
  45 + textAlign: commonProps.textAlign()
54 46  
55 47 },
56 48 editorConfig: {
... ...
front-end/h5/src/components/plugins/lbp-form-button.js
  View file @f809cdf
1 1 import LbpTextAlign from '@luban-h5/lbs-text-align'
  2 +import commonProps from './common/props.js'
2 3  
3 4 export default {
4 5 render () {
... ... @@ -35,62 +36,16 @@ export default {
35 36 },
36 37 name: 'lbp-form-button',
37 38 props: {
38   - text: {
39   - type: String,
40   - default: '按钮'
41   - },
42   - type: {
43   - type: String,
44   - default: 'text'
45   - },
46   - placeholder: {
47   - type: String,
48   - default: '请填写提示文字'
49   - },
50   - required: {
51   - type: Boolean,
52   - default: false
53   - },
54   - disabled: {
55   - type: Boolean,
56   - default: false
57   - },
58   - backgroundColor: {
59   - type: String,
60   - default: 'transparent'
61   - },
62   - color: {
63   - type: String,
64   - default: 'black'
65   - },
66   - fontSize: {
67   - type: Number,
68   - default: 14
69   - },
70   - lineHeight: {
71   - type: Number,
72   - default: 1
73   - },
74   - borderWidth: {
75   - type: Number,
76   - default: 1
77   - },
78   - borderRadius: {
79   - type: Number,
80   - default: 0
81   - },
82   - borderColor: {
83   - type: String,
84   - default: '#ced4da'
85   - },
86   - textAlign: {
87   - type: String,
88   - default: 'center'
89   - }
90   - // pageMode: {
91   - // type: String,
92   - // default: 'edit'
93   - // }
  39 + text: commonProps.text(),
  40 + vertical: commonProps.vertical,
  41 + backgroundColor: commonProps.backgroundColor,
  42 + color: commonProps.color,
  43 + fontSize: commonProps.fontSize,
  44 + lineHeight: commonProps.lineHeight,
  45 + borderWidth: commonProps.borderWidth,
  46 + borderRadius: commonProps.borderRadius,
  47 + borderColor: commonProps.borderColor,
  48 + textAlign: commonProps.textAlign()
94 49 },
95 50 methods: {
96 51 handleClick () {
... ... @@ -118,114 +73,6 @@ export default {
118 73 }
119 74 },
120 75 editorConfig: {
121   - propsConfig: {
122   - text: {
123   - type: 'a-input',
124   - label: '按钮文字',
125   - require: true,
126   - defaultPropValue: '按钮'
127   - },
128   - fontSize: {
129   - type: 'a-input-number',
130   - label: '字号(px)',
131   - require: true,
132   - prop: {
133   - step: 1,
134   - min: 12,
135   - max: 144
136   - },
137   - defaultPropValue: 14
138   - },
139   - color: {
140   - type: 'a-input',
141   - label: '文字颜色',
142   - // !#zh 为编辑组件指定 prop
143   - prop: {
144   - type: 'color'
145   - },
146   - require: true,
147   - defaultPropValue: 'black'
148   - },
149   - backgroundColor: {
150   - type: 'a-input', // lbs-color-picker
151   - label: '背景颜色',
152   - prop: {
153   - type: 'color'
154   - },
155   - require: true,
156   - defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
157   - },
158   - borderColor: {
159   - type: 'a-input', // lbs-color-picker
160   - label: '边框颜色',
161   - prop: {
162   - type: 'color'
163   - },
164   - require: true,
165   - defaultPropValue: '#eeeeee'
166   - },
167   - borderWidth: {
168   - type: 'a-input-number',
169   - label: '边框宽度(px)',
170   - require: true,
171   - prop: {
172   - step: 1,
173   - min: 1,
174   - max: 10
175   - },
176   - defaultPropValue: 1
177   - },
178   - borderRadius: {
179   - type: 'a-input-number',
180   - label: '圆角(px)',
181   - require: true,
182   - prop: {
183   - step: 0.1,
184   - min: 0,
185   - max: 10
186   - },
187   - defaultPropValue: 0
188   - },
189   - lineHeight: {
190   - type: 'a-input-number',
191   - label: '行高',
192   - require: true,
193   - prop: {
194   - step: 0.1,
195   - min: 0.1,
196   - max: 10
197   - },
198   - defaultPropValue: 1
199   - },
200   - textAlign: {
201   - /**
202   - * #!en: you can also config type like below:
203   - * #!zh: 可以直接这样写：
204   - textAlign: {
205   - type: component(component definition json/自定义的组件，比如下面的 components[''lbs-text-align'])
206   - }
207   -
208   - * more explanation
209   - textAlign: {
210   - type: {
211   - render() {},
212   - props: {},
213   - methods: {},
214   - }
215   - }
216   - * #!en: reference: how to judge the tag is custom component or a HTML element in React or Vue?
217   - * !#zh:
218   - * 思路来源：
219   - * React 中 深入JSX 中，如何判断 h(tag) 中的 tag 是自定义组件还是普通 HTML 元素呢？React 是判断该 tag 是否为 function 来实现的
220   - * Vue 中的自定义组件 是一个普通的 JSON 对象，最后自定义组件被转换成了函数，输入是 JSON 输出是 函数，可以看看 Vue 中 createElement 也就是 h 的实现·
221   - * 参见：http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/
222   - */
223   - type: 'lbs-text-align',
224   - label: '文字对齐',
225   - require: true,
226   - defaultPropValue: 'center'
227   - }
228   - },
229 76 components: {
230 77 'lbs-text-align': LbpTextAlign,
231 78 'lbs-select-input-type': {
... ...
front-end/h5/src/components/plugins/lbp-form-checkbox-group.js
  View file @f809cdf
... ... @@ -21,15 +21,38 @@ export default {
21 21 props: {
22 22 aliasName: {
23 23 type: String,
24   - default: `标题演示-${genUUID().slice(0, 6)}`
  24 + default: `标题演示-${genUUID().slice(0, 6)}`,
  25 + editor: {
  26 + type: 'a-input',
  27 + label: '填写标题',
  28 + require: true
  29 + }
25 30 },
26 31 items: {
27 32 type: Array,
28   - default: () => defaultItems
  33 + default: () => defaultItems,
  34 + editor: {
  35 + type: 'lbs-form-radio-items-editor',
  36 + label: '选项列表',
  37 + require: true,
  38 + defaultPropValue: defaultItems
  39 + }
29 40 },
30 41 type: {
31 42 type: String,
32   - default: 'checkbox'
  43 + default: 'checkbox',
  44 + editor: {
  45 + type: 'a-radio-group',
  46 + label: '选择模式',
  47 + require: true,
  48 + prop: {
  49 + options: [
  50 + { label: '单选', value: 'radio' },
  51 + { label: '多选', value: 'checkbox' }
  52 + ],
  53 + name: 'mode'
  54 + }
  55 + }
33 56 }
34 57 },
35 58 data () {
... ... @@ -54,33 +77,6 @@ export default {
54 77 }
55 78 },
56 79 editorConfig: {
57   - propsConfig: {
58   - items: {
59   - type: 'lbs-form-radio-items-editor',
60   - label: '选项列表',
61   - require: true,
62   - defaultPropValue: defaultItems
63   - },
64   - aliasName: {
65   - type: 'a-input',
66   - label: '填写标题',
67   - require: true,
68   - defaultPropValue: `标题演示-${genUUID().slice(0, 6)}`
69   - },
70   - type: {
71   - type: 'a-radio-group',
72   - label: '选择模式',
73   - require: true,
74   - prop: {
75   - options: [
76   - { label: '单选', value: 'radio' },
77   - { label: '多选', value: 'checkbox' }
78   - ],
79   - name: 'mode'
80   - },
81   - defaultPropValue: 'checkbox'
82   - }
83   - },
84 80 components: {
85 81 'lbs-form-radio-items-editor': {
86 82 render () {
... ...
front-end/h5/src/components/plugins/lbp-form-input.js
  View file @f809cdf
1 1 import LbpTextAlign from '@luban-h5/lbs-text-align'
  2 +import commonProps from './common/props.js'
2 3  
3 4 export default {
4 5 name: 'lbp-form-input',
... ... @@ -33,145 +34,29 @@ export default {
33 34 },
34 35 type: {
35 36 type: String,
36   - default: 'text'
37   - },
38   - placeholder: {
39   - type: String,
40   - default: '姓名'
41   - },
42   - required: {
43   - type: Boolean,
44   - default: false
  37 + default: 'text',
  38 + editor: {
  39 + type: 'lbs-select-input-type',
  40 + label: '类型',
  41 + defaultPropValue: 'text'
  42 + }
45 43 },
46 44 disabled: {
47 45 type: Boolean,
48 46 default: false
49 47 },
50   - backgroundColor: {
51   - type: String,
52   - default: 'transparent'
53   - },
54   - color: {
55   - type: String,
56   - default: 'black'
57   - },
58   - fontSize: {
59   - type: Number,
60   - default: 14
61   - },
62   - lineHeight: {
63   - type: Number,
64   - default: 1
65   - },
66   - borderWidth: {
67   - type: Number,
68   - default: 1
69   - },
70   - borderRadius: {
71   - type: Number,
72   - default: 0
73   - },
74   - borderColor: {
75   - type: String,
76   - default: '#ced4da'
77   - },
78   - textAlign: {
79   - type: String,
80   - default: 'left'
81   - }
  48 + // type: commonProps.type,
  49 + placeholder: commonProps.placeholder('姓名'),
  50 + fontSize: commonProps.fontSize,
  51 + color: commonProps.color,
  52 + backgroundColor: commonProps.backgroundColor,
  53 + borderColor: commonProps.borderColor,
  54 + borderWidth: commonProps.borderWidth,
  55 + borderRadius: commonProps.borderRadius,
  56 + lineHeight: commonProps.lineHeight,
  57 + textAlign: commonProps.textAlign({ defaultValue: 'left' })
82 58 },
83 59 editorConfig: {
84   - propsConfig: {
85   - type: {
86   - type: 'lbs-select-input-type',
87   - label: '类型',
88   - defaultPropValue: 'text'
89   - },
90   - placeholder: {
91   - type: 'a-input',
92   - label: '提示文字',
93   - require: true,
94   - defaultPropValue: '姓名'
95   - },
96   - fontSize: {
97   - type: 'a-input-number',
98   - label: '字号(px)',
99   - require: true,
100   - prop: {
101   - step: 1,
102   - min: 12,
103   - max: 144
104   - },
105   - defaultPropValue: 14
106   - },
107   - color: {
108   - type: 'a-input',
109   - label: '文字颜色',
110   - // !#zh 为编辑组件指定 prop
111   - prop: {
112   - type: 'color'
113   - },
114   - require: true,
115   - defaultPropValue: 'black'
116   - },
117   - backgroundColor: {
118   - type: 'a-input', // lbs-color-picker
119   - label: '背景颜色',
120   - prop: {
121   - type: 'color'
122   - },
123   - require: true,
124   - defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
125   - },
126   - borderColor: {
127   - type: 'a-input', // lbs-color-picker
128   - label: '边框颜色',
129   - prop: {
130   - type: 'color'
131   - },
132   - require: true,
133   - defaultPropValue: '#eeeeee'
134   - },
135   - borderWidth: {
136   - type: 'a-input-number',
137   - label: '边框宽度(px)',
138   - require: true,
139   - prop: {
140   - step: 1,
141   - min: 1,
142   - max: 10
143   - },
144   - defaultPropValue: 1
145   - },
146   - borderRadius: {
147   - type: 'a-input-number',
148   - label: '圆角(px)',
149   - require: true,
150   - prop: {
151   - step: 0.1,
152   - min: 0,
153   - max: 10
154   - },
155   - defaultPropValue: 0
156   - },
157   - lineHeight: {
158   - type: 'a-input-number',
159   - label: '行高',
160   - require: true,
161   - prop: {
162   - step: 0.1,
163   - min: 0.1,
164   - max: 10
165   - },
166   - defaultPropValue: 1
167   - },
168   - textAlign: {
169   - type: 'lbs-text-align',
170   - label: '文字对齐',
171   - require: true,
172   - defaultPropValue: 'left'
173   - }
174   - },
175 60 components: {
176 61 'lbs-text-align': LbpTextAlign,
177 62 'lbs-select-input-type': {
... ...
front-end/h5/src/components/plugins/lbp-form-radio-group.js
  View file @f809cdf
... ... @@ -18,15 +18,38 @@ export default {
18 18 props: {
19 19 aliasName: {
20 20 type: String,
21   - default: `标题演示-${genUUID().slice(0, 6)}`
  21 + default: `标题演示-${genUUID().slice(0, 6)}`,
  22 + editor: {
  23 + type: 'a-input',
  24 + label: '填写标题',
  25 + require: true
  26 + }
22 27 },
23 28 items: {
24 29 type: Array,
25   - default: () => defaultItems
  30 + default: () => defaultItems,
  31 + editor: {
  32 + type: 'lbs-form-radio-items-editor',
  33 + label: '选项列表',
  34 + require: true,
  35 + defaultPropValue: defaultItems
  36 + }
26 37 },
27 38 type: {
28 39 type: String,
29   - default: 'radio'
  40 + default: 'radio',
  41 + editor: {
  42 + type: 'a-radio-group',
  43 + label: '选择模式',
  44 + require: true,
  45 + prop: {
  46 + options: [
  47 + { label: '单选', value: 'radio' },
  48 + { label: '多选', value: 'checkbox' }
  49 + ],
  50 + name: 'mode'
  51 + }
  52 + }
30 53 }
31 54 },
32 55 data () {
... ... @@ -51,33 +74,6 @@ export default {
51 74 }
52 75 },
53 76 editorConfig: {
54   - propsConfig: {
55   - items: {
56   - type: 'lbs-form-radio-items-editor',
57   - label: '选项列表',
58   - require: true,
59   - defaultPropValue: defaultItems
60   - },
61   - aliasName: {
62   - type: 'a-input',
63   - label: '填写标题',
64   - require: true,
65   - defaultPropValue: `标题演示-${genUUID().slice(0, 6)}`
66   - },
67   - type: {
68   - type: 'a-radio-group',
69   - label: '选择模式',
70   - require: true,
71   - prop: {
72   - options: [
73   - { label: '单选', value: 'radio' },
74   - { label: '多选', value: 'checkbox' }
75   - ],
76   - name: 'mode'
77   - },
78   - defaultPropValue: 'radio'
79   - }
80   - },
81 77 components: {
82 78 'lbs-form-radio-items-editor': {
83 79 render () {
... ...
front-end/h5/src/components/plugins/lbp-form-radio.js
  View file @f809cdf
1 1 import './styles/radio.scss'
2 2 import commonProps from './common/props.js'
3   -import editorConfigForProps from './common/editor-config-for-configurable-props.js'
4 3 import { genUUID } from '../../utils/element.js'
5 4  
6 5 export default {
... ... @@ -36,11 +35,6 @@ export default {
36 35 default: () => {}
37 36 }
38 37 },
39   - editorConfig: {
40   - propsConfig: {
41   - ...editorConfigForProps
42   - }
43   - },
44 38 methods: {
45 39 handleChange (e) {
46 40 if (this.disabled) return
... ... @@ -49,42 +43,14 @@ export default {
49 43 },
50 44 render () {
51 45 const {
52   - // color,
53   - // textAlign,
54   - // backgroundColor,
55   - // fontSize,
56   - // lineHeight,
57   - // borderColor,
58   - // borderRadius,
59   - // borderWidth,
60 46 aliasName,
61   - // id,
62 47 type,
63   - // readOnly, // ?
64 48 disabled,
65   - // tabIndex, // ?
66 49 checked,
67   - // autoFocus,
68 50 value
69   - // vertical
70 51 } = this
71 52  
72 53 const uuid = +new Date() + genUUID()
73   -
74   - // const style = {
75   - // color,
76   - // textAlign,
77   - // backgroundColor,
78   - // fontSize: fontSize,
79   - // lineHeight: lineHeight + 'em',
80   - // borderColor,
81   - // borderRadius: borderRadius + 'px',
82   - // borderWidth: borderWidth + 'px',
83   - // textDecoration: 'none',
84   - // display: vertical ? 'block' : 'inline-block'
85   - // }
86   -
87   - // const checkedClass = checked && 'is-checked'
88 54 return (
89 55 <div class={['lbp-' + this.type + '-wrapper', 'lbp-rc-wrapper']}>
90 56 <span class="tag">{value}</span>
... ... @@ -92,56 +58,24 @@ export default {
92 58 class={['lbp-' + this.type, 'lbp-rc-input']}
93 59 name={aliasName}
94 60 id={uuid}
95   - // id={id}
96 61 type={type}
97 62 ref="input"
98 63 value={value}
99 64 disabled={disabled}
100 65 checked={!!checked}
101 66 onChange={this.handleChange}
102   - // readOnly={readOnly}
103   - // tabIndex={tabIndex}
104   - // className={`${prefixCls}-input`}
105   - // onClick={this.onClick}
106   - // onFocus={this.onFocus}
107   - // onBlur={this.onBlur}
108   - // onInput={this.onInput}
109   - // autoFocus={autoFocus}
110   - // data-type="lbp-form-input"
111   - // {...globalProps}
  67 + // readOnly={readOnly}
  68 + // tabIndex={tabIndex}
  69 + // className={`${prefixCls}-input`}
  70 + // onClick={this.onClick}
  71 + // onFocus={this.onFocus}
  72 + // onBlur={this.onBlur}
  73 + // onInput={this.onInput}
  74 + // autoFocus={autoFocus}
  75 + // data-type="lbp-form-input"
112 76 />
113   - {/* <input type="checkbox" id="checkbox-1-1" class="lbp-checkbox" /> */}
114   - {/* <label for="checkbox-1-1"></label> */}
115 77 <label for={uuid}></label>
116 78 </div>
117   - // <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">
118   - // <span class={'lbp-radio__input ' + checkedClass}>
119   - // <span class="lbp-radio__inner"></span>
120   - // {checked + ''}
121   - // <input
122   - // class="lbp-radio__original"
123   - // name={aliasName}
124   - // id={id}
125   - // type={type}
126   - // ref="input"
127   - // value={value}
128   - // disabled={disabled}
129   - // checked={!!checked}
130   - // onChange={this.handleChange}
131   - // // readOnly={readOnly}
132   - // // tabIndex={tabIndex}
133   - // // className={`${prefixCls}-input`}
134   - // // onClick={this.onClick}
135   - // // onFocus={this.onFocus}
136   - // // onBlur={this.onBlur}
137   - // // onInput={this.onInput}
138   - // // autoFocus={autoFocus}
139   - // // data-type="lbp-form-input"
140   - // // {...globalProps}
141   - // />
142   - // <span class="lbp-radio__label"><slot>{value}</slot></span>
143   - // </span>
144   - // </label>
145 79 )
146 80 }
147 81 }
... ...
front-end/h5/src/components/plugins/lbp-picture.js
  View file @f809cdf
... ... @@ -8,15 +8,8 @@ export default {
8 8 props: {
9 9 imgSrc: {
10 10 type: String,
11   - default: placeholderImg
12   - }
13   - },
14   - data: () => ({
15   - placeholderImg
16   - }),
17   - editorConfig: {
18   - propsConfig: {
19   - imgSrc: {
  11 + default: placeholderImg,
  12 + editor: {
20 13 type: 'image-gallery',
21 14 label: '图片url',
22 15 prop: {
... ... @@ -24,7 +17,12 @@ export default {
24 17 },
25 18 defaultPropValue: ''
26 19 }
27   - },
  20 + }
  21 + },
  22 + data: () => ({
  23 + placeholderImg
  24 + }),
  25 + editorConfig: {
28 26 components: {
29 27 'image-gallery': ImageGallery
30 28 }
... ...
front-end/h5/src/components/plugins/lbp-slide.js
  View file @f809cdf
... ... @@ -24,11 +24,23 @@ export default {
24 24 props: {
25 25 interval: {
26 26 type: Number,
27   - default: 4000
  27 + default: 4000,
  28 + editor: {
  29 + type: 'a-input-number',
  30 + label: '间隔时间',
  31 + require: true,
  32 + defaultPropValue: 4000
  33 + }
28 34 },
29 35 dataSource: {
30 36 type: Object,
31   - default: () => getDefaultDataSource()
  37 + default: () => getDefaultDataSource(),
  38 + editor: {
  39 + type: 'lbs-slide-items-editor',
  40 + label: '图片列表',
  41 + require: true,
  42 + defaultPropValue: getDefaultDataSource()
  43 + }
32 44 },
33 45 editorMode: {
34 46 type: String,
... ... @@ -40,20 +52,6 @@ export default {
40 52 }
41 53 },
42 54 editorConfig: {
43   - propsConfig: {
44   - interval: {
45   - type: 'a-input-number',
46   - label: '间隔时间',
47   - require: true,
48   - defaultPropValue: 4000
49   - },
50   - dataSource: {
51   - type: 'lbs-slide-items-editor',
52   - label: '图片列表',
53   - require: true,
54   - defaultPropValue: getDefaultDataSource()
55   - }
56   - },
57 55 components: {
58 56 'lbs-slide-items-editor': {
59 57 render () {
... ...
front-end/h5/src/components/plugins/lbp-video.js
  View file @f809cdf
... ... @@ -7,7 +7,18 @@ export default {
7 7 props: {
8 8 src: {
9 9 type: String,
10   - default: ``
  10 + default: ``,
  11 + editor: {
  12 + type: 'a-input',
  13 + label: '视频url',
  14 + prop: {
  15 + type: 'textarea'
  16 + },
  17 + extra: (h) => {
  18 + return <a href='https://github.com/ly525/luban-h5/issues/85' target='_blank'>教程(Tutorial)</a>
  19 + },
  20 + defaultPropValue: ''
  21 + }
11 22 },
12 23 disabled: {
13 24 type: Boolean,
... ... @@ -42,19 +53,6 @@ export default {
42 53 )
43 54 },
44 55 editorConfig: {
45   - propsConfig: {
46   - src: {
47   - type: 'a-input',
48   - label: '视频url',
49   - prop: {
50   - type: 'textarea'
51   - },
52   - extra: (h) => {
53   - return <a href='https://github.com/ly525/luban-h5/issues/85' target='_blank'>教程(Tutorial)</a>
54   - },
55   - defaultPropValue: ''
56   - }
57   - },
58 56 components: {
59 57 }
60 58 }
... ...
front-end/h5/src/mixins/load-plugins.js
  View file @f809cdf
1 1 import Vue from 'vue'
2 2 // import LbpButton from '@luban-h5/lbc-button'
3 3 import LbpButton from '../components/plugins/lbp-button'
4   -// import LbpPicture from '../components/plugins/lbp-picture'
5   -// import LbpVideo from '../components/plugins/lbp-video'
  4 +import LbpPicture from '../components/plugins/lbp-picture'
  5 +import LbpVideo from '../components/plugins/lbp-video'
6 6 import LbpText from '../components/plugins/lbp-text'
7   -// import LbpFormInput from '../components/plugins/lbp-form-input'
8   -// import LbpFormButton from '../components/plugins/lbp-form-button'
9   -// import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'
10   -// import LbpFormCheckboxGroup from '../components/plugins/lbp-form-checkbox-group'
  7 +import LbpFormInput from '../components/plugins/lbp-form-input'
  8 +import LbpFormButton from '../components/plugins/lbp-form-button'
  9 +import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'
  10 +import LbpFormCheckboxGroup from '../components/plugins/lbp-form-checkbox-group'
11 11 import LbpBackground from '../components/plugins/lbp-background'
12   -// import LbpSlide from '../components/plugins/lbp-slide'
  12 +import LbpSlide from '../components/plugins/lbp-slide'
13 13  
14 14 export const pluginsList = [
15   - // {
16   - // title: '图片',
17   - // i18nTitle: {
18   - // 'en-US': 'Picture',
19   - // 'zh-CN': '图片'
20   - // },
21   - // icon: 'photo',
22   - // component: LbpPicture,
23   - // visible: true,
24   - // name: LbpPicture.name
25   - // },
  15 + {
  16 + title: '图片',
  17 + i18nTitle: {
  18 + 'en-US': 'Picture',
  19 + 'zh-CN': '图片'
  20 + },
  21 + icon: 'photo',
  22 + component: LbpPicture,
  23 + visible: true,
  24 + name: LbpPicture.name
  25 + },
26 26 {
27 27 i18nTitle: {
28 28 'en-US': 'Text',
... ... @@ -45,99 +45,85 @@ export const pluginsList = [
45 45 visible: true,
46 46 name: LbpButton.name
47 47 },
48   - // {
49   - // i18nTitle: {
50   - // 'en-US': 'Carousel',
51   - // 'zh-CN': '轮播图'
52   - // },
53   - // title: '轮播图',
54   - // icon: 'photo',
55   - // component: LbpSlide,
56   - // visible: true,
57   - // name: LbpSlide.name
58   - // // disabled: true
59   - // },
60   - // {
61   - // i18nTitle: {
62   - // 'en-US': 'Map',
63   - // 'zh-CN': '地图'
64   - // },
65   - // title: '地图',
66   - // icon: 'map-o',
67   - // component: LbpFormRadioGroup,
68   - // visible: true,
69   - // name: LbpFormRadioGroup.name,
70   - // disabled: true
71   - // },
72   - // {
73   - // i18nTitle: {
74   - // 'en-US': 'Video',
75   - // 'zh-CN': '视频'
76   - // },
77   - // title: '视频',
78   - // icon: 'file-video-o',
79   - // component: LbpVideo,
80   - // visible: true,
81   - // name: LbpVideo.name
82   - // },
83   - // // {
84   - // // title: '视频',
85   - // // icon: 'play-circle-o',
86   - // // component: LbpVideo,
87   - // // visible: true,
88   - // // name: LbpVideo.name
89   - // // },
90   - // {
91   - // i18nTitle: {
92   - // 'en-US': 'Form Input',
93   - // 'zh-CN': '表单输入'
94   - // },
95   - // title: '表单输入',
96   - // icon: 'pencil-square-o',
97   - // component: LbpFormInput,
98   - // visible: true,
99   - // name: LbpFormInput.name
100   - // },
101   - // {
102   - // i18nTitle: {
103   - // 'en-US': 'Form Submit',
104   - // 'zh-CN': '表单提交'
105   - // },
106   - // title: '表单提交',
107   - // icon: 'hand-pointer-o',
108   - // component: LbpFormButton,
109   - // visible: true,
110   - // name: LbpFormButton.name
111   - // },
112   - // // {
113   - // // title: '表单单选',
114   - // // icon: 'hand-pointer-o',
115   - // // component: LbpFormRadio,
116   - // // visible: true,
117   - // // name: LbpFormRadio.name
118   - // // },
119   - // {
120   - // i18nTitle: {
121   - // 'en-US': 'Form Checkbox',
122   - // 'zh-CN': '表单多选'
123   - // },
124   - // title: '表单多选',
125   - // icon: 'check-square-o',
126   - // component: LbpFormCheckboxGroup,
127   - // visible: true,
128   - // name: LbpFormCheckboxGroup.name
129   - // },
130   - // {
131   - // i18nTitle: {
132   - // 'en-US': 'Form Radio',
133   - // 'zh-CN': '表单单选'
134   - // },
135   - // title: '表单单选',
136   - // icon: 'dot-circle-o',
137   - // component: LbpFormRadioGroup,
138   - // visible: true,
139   - // name: LbpFormRadioGroup.name
140   - // },
  48 + {
  49 + i18nTitle: {
  50 + 'en-US': 'Carousel',
  51 + 'zh-CN': '轮播图'
  52 + },
  53 + title: '轮播图',
  54 + icon: 'photo',
  55 + component: LbpSlide,
  56 + visible: true,
  57 + name: LbpSlide.name
  58 + // disabled: true
  59 + },
  60 + {
  61 + i18nTitle: {
  62 + 'en-US': 'Map',
  63 + 'zh-CN': '地图'
  64 + },
  65 + title: '地图',
  66 + icon: 'map-o',
  67 + component: LbpFormRadioGroup,
  68 + visible: true,
  69 + name: LbpFormRadioGroup.name,
  70 + disabled: true
  71 + },
  72 + {
  73 + i18nTitle: {
  74 + 'en-US': 'Video',
  75 + 'zh-CN': '视频'
  76 + },
  77 + title: '视频',
  78 + icon: 'file-video-o',
  79 + component: LbpVideo,
  80 + visible: true,
  81 + name: LbpVideo.name
  82 + },
  83 + {
  84 + i18nTitle: {
  85 + 'en-US': 'Form Input',
  86 + 'zh-CN': '表单输入'
  87 + },
  88 + title: '表单输入',
  89 + icon: 'pencil-square-o',
  90 + component: LbpFormInput,
  91 + visible: true,
  92 + name: LbpFormInput.name
  93 + },
  94 + {
  95 + i18nTitle: {
  96 + 'en-US': 'Form Submit',
  97 + 'zh-CN': '表单提交'
  98 + },
  99 + title: '表单提交',
  100 + icon: 'hand-pointer-o',
  101 + component: LbpFormButton,
  102 + visible: true,
  103 + name: LbpFormButton.name
  104 + },
  105 + {
  106 + i18nTitle: {
  107 + 'en-US': 'Form Checkbox',
  108 + 'zh-CN': '表单多选'
  109 + },
  110 + title: '表单多选',
  111 + icon: 'check-square-o',
  112 + component: LbpFormCheckboxGroup,
  113 + visible: true,
  114 + name: LbpFormCheckboxGroup.name
  115 + },
  116 + {
  117 + i18nTitle: {
  118 + 'en-US': 'Form Radio',
  119 + 'zh-CN': '表单单选'
  120 + },
  121 + title: '表单单选',
  122 + icon: 'dot-circle-o',
  123 + component: LbpFormRadioGroup,
  124 + visible: true,
  125 + name: LbpFormRadioGroup.name
  126 + },
141 127 {
142 128 i18nTitle: {
143 129 'en-US': 'Background',
... ...