1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| const title = '边框组件'
| // 右侧配置项
| const setting = [
| {
| label: '对齐类型',
| // 设置组件类型， select / input / colorPicker
| type: 'select',
| // 字段
| field: 'customize_diagonalType',
| optionField: 'customize.diagonalType', // 对应options中的字段
| // 是否多选
| multiple: false,
| options: [
| {
| label: '左上右下',
| value: 'leftTopRightBottom'
| },
| {
| label: '右上左下',
| value: 'rightTopLeftBottom'
| }
| ],
| // 绑定的值
| value: 'leftTopRightBottom',
| // tab页。 data: 数据， custom: 自定义
| tabName: 'custom'
| },
| {
| label: '背景颜色',
| // 设置组件类型， select / input / colorPicker
| type: 'colorPicker',
| // 字段
| field: 'customize_backgroundColor',
| optionField: 'customize.backgroundColor', // 对应options中的字段
| // 是否多选
| multiple: false,
| // 绑定的值
| value: '#D3D3D32B',
| // tab页。 data: 数据， custom: 自定义
| tabName: 'custom'
| },
| {
| label: '长度',
| // 设置组件类型， select / input / colorPicker
| type: 'inputNumber',
| // 字段
| field: 'customize_borderLength',
| optionField: 'customize.borderLength', // 对应options中的字段
| // 是否多选
| multiple: false,
| // 绑定的值
| value: '30',
| // tab页。 data: 数据， custom: 自定义
| tabName: 'custom'
| },
| {
| label: '粗细',
| // 设置组件类型， select / input / colorPicker
| type: 'inputNumber',
| // 字段
| field: 'customize_borderWidth',
| optionField: 'customize.borderWidth', // 对应options中的字段
| // 是否多选
| multiple: false,
| // 绑定的值
| value: '4',
| // tab页。 data: 数据， custom: 自定义
| tabName: 'custom'
| },
| {
| label: '边框颜色',
| // 设置组件类型， select / input / colorPicker
| type: 'colorPicker',
| // 字段
| field: 'customize_borderColor',
| optionField: 'customize.borderColor', // 对应options中的字段
| // 是否多选
| multiple: false,
| // 绑定的值
| value: '#409EFF',
| // tab页。 data: 数据， custom: 自定义
| tabName: 'custom'
| },
| {
| label: '边框圆角',
| // 设置组件类型， select / input / colorPicker
| type: 'inputNumber',
| // 范围
| min: 0,
| max: 100,
| // 字段
| field: 'customize_borderRadius',
| optionField: 'customize.borderRadius', // 对应options中的字段
| // 是否多选
| multiple: false,
| // 绑定的值
| value: 4,
| // tab页。 data: 数据， custom: 自定义
| tabName: 'custom'
| }
| ]
|
| // 模拟数据
|
| const option = {
| // 自定义组件其他属性
| customize: {
| diagonalType: 'leftTopRightBottom',
| borderLength: 30,
| borderWidth: 4,
| backgroundColor: '#D3D3D32B',
| borderRadius: 0,
| borderColor: '#409EFF'
| }
| }
|
| export default {
| title,
| setting,
| option: {
| ...option,
| displayOption: {
| dataAllocation: {
| enable: false
| }
| }
| }
| }
|
|
