Skip to content

Commit 1d65297

Browse files
vincentzycvincentzyc
committed
组件设置优化
1 parent 119ced7 commit 1d65297

3 files changed

Lines changed: 87 additions & 54 deletions

File tree

‎src/assets/json/widget.json‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
"name": "手机号",
55
"placeholder": "请输入手机号",
66
"showLabel": false,
7-
"labelTitle": "手机号",
8-
"labelPosition": "left",
9-
"labelwidth": 50,
10-
"labelWidth": "50px",
7+
"label": {
8+
"labelTitle": "手机号",
9+
"labelPosition": "left",
10+
"labelwidth": 50,
11+
"labelWidth": "50px"
12+
},
1113
"value": "",
1214
"apiKey": "phone",
1315
"codeValue": "",
@@ -24,10 +26,12 @@
2426
"name": "输入框",
2527
"placeholder": "请输入姓名",
2628
"showLabel": false,
27-
"labelTitle": "姓名",
28-
"labelPosition": "left",
29-
"labelwidth": 50,
30-
"labelWidth": "50px",
29+
"label": {
30+
"labelTitle": "姓名",
31+
"labelPosition": "left",
32+
"labelwidth": 50,
33+
"labelWidth": "50px"
34+
},
3135
"value": "",
3236
"apiKey": "name",
3337
"fieldTypes": "inputTypes",
@@ -38,11 +42,15 @@
3842
{
3943
"type": "checkbox",
4044
"name": "选择框",
41-
"labelTitle": "旅拍城市",
4245
"value": [],
4346
"apiKey": "shootPlace",
4447
"isRadio": false,
45-
"labelPosition": "left",
48+
"label": {
49+
"labelTitle": "旅拍城市",
50+
"labelwidth": 66,
51+
"labelWidth": "66px",
52+
"labelPosition": "left"
53+
},
4654
"fieldTypes": "checkboxTypes",
4755
"options": ["北京", "三亚", "丽江", "巴厘岛", "马尔代夫", "威尼斯", "其他"],
4856
"style": {
@@ -52,8 +60,12 @@
5260
{
5361
"type": "date",
5462
"name": "日期选择器",
55-
"labelTitle": "生日",
56-
"labelPosition": "left",
63+
"label": {
64+
"labelTitle": "生日",
65+
"labelwidth": 50,
66+
"labelWidth": "50px",
67+
"labelPosition": "left"
68+
},
5769
"apiKey": "birthday",
5870
"value": "",
5971
"fieldTypes": "dateTypes",
@@ -67,11 +79,13 @@
6779
"value": "",
6880
"apiKey": "educationLevel",
6981
"placeholder": "请选择教育程度",
70-
"showLabel": false,
71-
"labelTitle": "教育程度",
72-
"labelPosition": "left",
73-
"labelwidth": 50,
74-
"labelWidth": "50px",
82+
"showLabel": true,
83+
"label": {
84+
"labelTitle": "教育程度",
85+
"labelPosition": "left",
86+
"labelwidth": 66,
87+
"labelWidth": "66px"
88+
},
7589
"fieldTypes": "selectTypes",
7690
"options": ["硕士及以上", "本科", "大专", "中专/高中及以下"],
7791
"style": {
@@ -81,9 +95,13 @@
8195
{
8296
"type": "switch",
8397
"name": "开关",
84-
"labelTitle": "是否有信用卡",
8598
"value": false,
86-
"labelPosition": "left",
99+
"label": {
100+
"labelTitle": "是否有信用卡",
101+
"labelPosition": "left",
102+
"labelwidth": 100,
103+
"labelWidth": "100px"
104+
},
87105
"fieldTypes": "switchTypes",
88106
"apiKey": "creditCard",
89107
"style": {
@@ -93,13 +111,17 @@
93111
{
94112
"type": "h-picker",
95113
"name": "横向滑动单选",
96-
"labelTitle": "年龄",
97114
"value": "",
98115
"options": ["20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
99-
"labelPosition": "left",
116+
"label": {
117+
"labelTitle": "年龄",
118+
"labelPosition": "left",
119+
"labelwidth": 50,
120+
"labelWidth": "50px"
121+
},
100122
"fieldTypes": "hPickerTypes",
101-
"apiKey": "age",
102-
"pickerColor":"#409eff",
123+
"apiKey": "age",
124+
"pickerColor": "#409eff",
103125
"style": {
104126
"margin": "0px 0px 0px 0px"
105127
}

‎src/components/widget-config.vue‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,15 @@
22
<div v-if="this.selectWg && Object.keys(this.selectWg).length > 0">
33
<el-form label-position="top">
44
<el-collapse v-model="activeName" accordion>
5-
<el-collapse-item title="基础设置" name="collapse1">
5+
<el-collapse-item title="基础设置" name="base">
66
<el-form-item label="选择控件" v-if="selectWg.hasOwnProperty('fieldTypes')">
77
<el-select v-model="selectWg.apiKey" filterable placeholder="请选择" @change="selectfield(selectWg.apiKey,fieldTypes[selectWg.fieldTypes])">
88
<el-option v-for="item in fieldTypes[selectWg.fieldTypes]" :key="item.value" :label="item.label" :value="item.value"></el-option>
99
</el-select>
1010
</el-form-item>
11-
<el-form-item label="标签" v-if="selectWg.hasOwnProperty('labelTitle')">
12-
<el-input v-model="selectWg.labelTitle"></el-input>
13-
</el-form-item>
1411
<el-form-item label="是否显示标签" v-if="selectWg.hasOwnProperty('showLabel')">
15-
<el-switch v-model="selectWg.showLabel" @change="selectWg.showLabel?activeName='collapse2':''"></el-switch>
12+
<el-switch v-model="selectWg.showLabel" @change="selectWg.showLabel?activeName='tag':''"></el-switch>
1613
</el-form-item>
17-
1814
<el-form-item label="是否发送验证码" v-if="selectWg.hasOwnProperty('showCode')">
1915
<el-switch v-model="selectWg.showCode"></el-switch>
2016
</el-form-item>
@@ -74,19 +70,28 @@
7470
</template>
7571
</el-collapse-item>
7672

77-
<el-collapse-item title="标签设置" name="collapse2" v-if="selectWg.showLabel">
78-
<el-form-item label="标签宽度(px)" v-if="selectWg.hasOwnProperty('labelwidth')">
79-
<el-input-number v-model="selectWg.labelwidth" :min="30" :max="300" size="small" @change="val=>selectWg.labelWidth = `${val}px`"/>
80-
</el-form-item>
81-
<el-form-item label="标签对齐方式" v-if="selectWg.hasOwnProperty('labelPosition')">
82-
<el-radio-group v-model="selectWg.labelPosition" size="mini">
73+
<el-collapse-item title="标签设置" name="tag" v-if="selectWg.label&&selectWg.showLabel!==false">
74+
<el-form-item label="标签名称" v-if="selectWg.label.hasOwnProperty('labelTitle')">
75+
<el-input v-model="selectWg.label.labelTitle"></el-input>
76+
</el-form-item>
77+
<el-form-item label="标签宽度(px)" v-if="selectWg.label.hasOwnProperty('labelwidth')">
78+
<el-input-number
79+
v-model="selectWg.label.labelwidth"
80+
:min="30"
81+
:max="300"
82+
size="small"
83+
@change="val=>selectWg.label.labelWidth = `${val}px`"
84+
/>
85+
</el-form-item>
86+
<el-form-item label="标签对齐方式" v-if="selectWg.label.hasOwnProperty('labelPosition')">
87+
<el-radio-group v-model="selectWg.label.labelPosition" size="mini">
8388
<el-radio-button label="left">左对齐</el-radio-button>
8489
<el-radio-button label="top">顶部对齐</el-radio-button>
8590
</el-radio-group>
8691
</el-form-item>
8792
</el-collapse-item>
8893

89-
<el-collapse-item title="外观样式" name="collapse3" v-if="selectWg.hasOwnProperty('style')">
94+
<el-collapse-item title="外观样式" name="style" v-if="selectWg.hasOwnProperty('style')">
9095
<el-form-item label="文本对齐方式" v-if="selectWg.style.hasOwnProperty('textAlign')">
9196
<el-radio-group v-model="selectWg.style.textAlign" size="mini">
9297
<el-radio-button label="left">左对齐</el-radio-button>
@@ -126,7 +131,7 @@ export default {
126131
},
127132
data() {
128133
return {
129-
activeName: 'collapse1',
134+
activeName: 'base',
130135
fieldTypes: allFieldTypes
131136
}
132137
},

‎src/components/widget-form-list.vue‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
>
1616
<!-- 手机 -->
1717
<div v-if="item.type === 'phone'" class="wg-phone" :style="item.style">
18-
<div class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
19-
<div class="wg-title" :style="{width:item.labelWidth}" v-show="item.showLabel">{{item.labelTitle}}</div>
18+
<div class="wg-item" :class="[item.label.labelPosition==='top'?'flex-column':'align-middle']">
19+
<div class="wg-title" :style="{width:item.label.labelWidth}" v-show="item.showLabel">{{item.label.labelTitle}}</div>
2020
<div class="flex-auto">
2121
<input class="wg-input" v-model="item.value" :placeholder="item.placeholder">
2222
</div>
2323
</div>
24-
<div class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']" v-if="item.showCode">
25-
<div class="wg-title flex-none" v-show="item.showLabel" :style="{width:item.labelWidth}">验证码</div>
24+
<div class="wg-item" :class="[item.label.labelPosition==='top'?'flex-column':'align-middle']" v-if="item.showCode">
25+
<div class="wg-title flex-none" v-show="item.showLabel" :style="{width:item.label.labelWidth}">验证码</div>
2626
<div class="flex flex-auto">
2727
<input placeholder="验证码" class="wg-input">
2828
<button class="getVerCode-btn" :style="item.style.btnStyle">获取验证码</button>
@@ -31,8 +31,8 @@
3131
</div>
3232

3333
<!-- 输入框 -->
34-
<div v-if="item.type === 'input'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']" :style="item.style">
35-
<div class="wg-title" :style="{width:item.labelWidth}" v-show="item.showLabel">{{item.labelTitle}}</div>
34+
<div v-if="item.type === 'input'" class="wg-item" :class="[item.label.labelPosition==='top'?'flex-column':'align-middle']" :style="item.style">
35+
<div class="wg-title" :style="{width:item.label.labelWidth}" v-show="item.showLabel">{{item.label.labelTitle}}</div>
3636
<div class="flex-auto">
3737
<input v-model="item.value" :placeholder="item.placeholder" class="wg-input">
3838
</div>
@@ -42,10 +42,10 @@
4242
<div
4343
v-if="item.type === 'checkbox'"
4444
class="wg-item flex-wrap wg-checkbox"
45-
:class="[item.labelPosition==='top'?'flex-column':'align-middle']"
45+
:class="[item.label.labelPosition==='top'?'flex-column':'align-middle']"
4646
:style="item.style"
4747
>
48-
<div class="wg-title" :style="{width:item.labelWidth}">{{item.labelTitle}}</div>
48+
<div class="wg-title" :style="{width:item.label.labelWidth}">{{item.label.labelTitle}}</div>
4949
<div class="flex-auto">
5050
<label class="label" v-for="(optionsItem, key) in item.options" :key="optionsItem + key">
5151
<input class="wg-checkbox-input" :type="item.isRadio?'radio':'checkbox'" :value="optionsItem" v-model="item.value" style="display:none">
@@ -55,12 +55,17 @@
5555
</div>
5656

5757
<!-- 下拉选择 -->
58-
<div v-if="item.type === 'select'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']" :style="item.style">
59-
<div class="wg-title" :style="{width:item.labelWidth}" v-show="item.showLabel">{{item.labelTitle}}</div>
58+
<div v-if="item.type === 'select'" class="wg-item" :class="[item.label.labelPosition==='top'?'flex-column':'align-middle']" :style="item.style">
59+
<div class="wg-title" :style="{width:item.label.labelWidth}" v-show="item.showLabel">{{item.label.labelTitle}}</div>
6060
<div class="flex-auto">
6161
<select v-model="item.value" class="wg-select flex-auto">
6262
<option value disabled selected hidden>{{item.placeholder}}</option>
63-
<option v-for="optionsItem in item.options" :key="optionsItem" :value="optionsItem" :label="item.showLabel?item.label:optionsItem"></option>
63+
<option
64+
v-for="(optionsItem,key) in item.options"
65+
:key="optionsItem + key"
66+
:value="optionsItem"
67+
:label="item.showLabel?item.label:optionsItem"
68+
></option>
6469
</select>
6570
</div>
6671
</div>
@@ -69,19 +74,19 @@
6974
<div
7075
v-if="item.type==='switch'"
7176
class="wg-item wg-switch"
72-
:class="[item.labelPosition==='top'?'flex-column':'align-middle']"
77+
:class="[item.label.labelPosition==='top'?'flex-column':'align-middle']"
7378
:style="item.style"
7479
>
75-
<div class="wg-title" :style="{width:item.labelWidth}">{{item.labelTitle}}</div>
80+
<div class="wg-title" :style="{width:item.label.labelWidth}">{{item.label.labelTitle}}</div>
7681
<label class="label">
7782
<input type="checkbox" class="wg-switch-input" v-model="item.value" style="display:none">
7883
<span class="wg-switch-core"></span>
7984
</label>
8085
</div>
8186

8287
<!-- 日期选择 -->
83-
<div v-if="item.type === 'date'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']" :style="item.style">
84-
<div class="wg-title" :style="{width:item.labelWidth}">{{item.labelTitle}}</div>
88+
<div v-if="item.type === 'date'" class="wg-item" :class="[item.label.labelPosition==='top'?'flex-column':'align-middle']" :style="item.style">
89+
<div class="wg-title" :style="{width:item.label.labelWidth}">{{item.label.labelTitle}}</div>
8590
<div class="flex-auto">
8691
<input type="date" v-model="item.value" class="wg-input flex-auto">
8792
</div>
@@ -104,12 +109,13 @@
104109
</div>
105110

106111
<!-- 横向滑动自动选择 -->
107-
<div class="flex flex-center" v-if="item.type === 'h-picker'" :style="item.style">
112+
<div class="wg-item" v-if="item.type === 'h-picker'" :class="[item.label.labelPosition==='top'?'flex-column':'align-middle']" :style="item.style">
113+
<div class="wg-title" :style="{width:item.label.labelWidth}">{{item.label.labelTitle}}</div>
108114
<div class="wg-horizontal-picker">
109115
<div
110116
class="picker-item"
111117
v-for="(optionsItem,key) in item.options"
112-
:key="optionsItem"
118+
:key="optionsItem + key"
113119
:style="key===0?{ color: item.pickerColor }:{}"
114120
>{{optionsItem}}</div>
115121
</div>

0 commit comments

Comments
 (0)