# 组件
diboot移动端组件采用easycom组件规范 (opens new window)，基于uview进行二次封装和调整，搭配devtools生成的后端接口，一键生成前端代码，数倍提效。
TIP
以下内容为组件概述，实际开发时，建议直接使用devtools生成前端代码。
# uview适配组件
TIP
为简化form表单使用门槛，我们对uviewu-form、u-form-item、u-input、u-checkbox-group进行调整适配，
增加了adapter-diboot属性且默认true，如果您的form表单均为uview的表单元素，在组件上将其置为false即可。
如果您升级了uview请注意上述几个文件进行对比调整，以方便使用diboot相关表单
# diboot表单完整案例
在使用diboot表单时，不论您的属性是否需要进行校验，u-form-item的prop属性都必须填写，该值会帮您自动构建form对象属性
<template>
<view class="u-p-24 page-bg-color" style="min-height: 100%;">
<view class="page-card u-p-l-24 u-p-r-24 u-p-b-24">
<u-form :model="form" ref="uForm" :label-width="150">
<u-form-item label="姓名" prop="name" required>
<u-input v-model="form.name" placeholder="请输入姓名" />
</u-form-item>
<u-form-item label="性别" prop="sex" required>
<di-select v-model="form.sex" placeholder="请选择性别" :list="list"></di-select>
</u-form-item>
<u-form-item label="水果" prop="fruits" required>
<di-checkbox-list v-model="form.fruits" :list="checkboxList"></di-checkbox-list>
</u-form-item>
<u-form-item label="味道" prop="taste" required>
<di-radio-list v-model="form.taste" :list="radioList"/>
</u-form-item>
<u-form-item label="开关" prop="switchVal">
<template slot="right">
<di-switch v-model="form.switchVal"></di-switch>
</template>
</u-form-item>
<u-form-item label="日历" prop="calendarDate" required>
<di-calendar-picker v-model="form.calendarDate" placeholder="请选择日期范围"/>
</u-form-item>
<u-form-item label="日历范围" prop="calendarRange" required>
<di-calendar-picker v-model="form.calendarRange" mode="range" placeholder="请选择日期范围"/>
</u-form-item>
<u-form-item label="地区" prop="region" required>
<di-region-picker v-model="form.region" placeholder="请选择地区"/>
</u-form-item>
<u-form-item label="时间" prop="time" required>
<di-date-picker v-model="form.time" placeholder="请选择时间" mode="datetime"/>
</u-form-item>
<u-form-item label="上传图片" prop="picture" required>
<di-upload v-model="form.picture" :file-list="fileWrapper.pictureList" rel-obj-field="picture" :rel-obj-type="relObjType"/>
</u-form-item>
</u-form>
<view class="u-m-t-60">
<u-button @click="submit" type="success">提交</u-button>
</view>
</view>
</view>
</template>
<script>
import form from '@/mixins/form'
export default {
data() {
return {
list: [{
value: '1',
label: '男'
}],
checkboxList: [{
label: '苹果',
value: 'apple'
}],
radioList: [{
label: '甜',
value: 'sweet'
}],
relObjType: 'Demo',
fileWrapper: {
pictureList: []
},
isUpload: true,
rules: {
name: [{
required: true,
message: '请输入姓名',
trigger: ['blur', 'change']
}],
sex: [{
required: true,
message: '请选择性别',
trigger: ['blur', 'change']
}],
fruits: [{
required: true,
message: '请选择水果',
trigger: ['blur', 'change']
}],
taste: [{
required: true,
message: '请选择味道',
trigger: ['blur', 'change']
}],
calendarDate: [{
required: true,
message: '请选择日历',
trigger: ['blur', 'change']
}],
calendarRange: [{
required: true,
message: '请选择日历范围',
trigger: ['blur', 'change']
}],
region: [{
required: true,
message: '请选择地区',
trigger: ['blur', 'change']
}],
time: [{
required: true,
message: '请选择时间',
trigger: ['blur', 'change']
}],
picture: [{
required: true,
message: '请上传图片',
trigger: ['blur', 'change']
}],
}
};
},
mixins:[form],
methods: {
enhance (values) {
this.__setFileUuidList__(values)
},
/****
* 打开表单之后的操作
* @param id
*/
afterOpen (id) {
// 回显图片
if(id) {
this.$dibootApi.get(`/uploadFile/getList/${id}/${this.relObjType}/picture`).then(res => {
if (res.code === 0) {
if (res.data && res.data.length > 0) {
res.data.forEach(data => {
this.fileWrapper.pictureList.push(this.fileFormatter(data,true))
})
}
}
})
}
}
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules);
}
};
</script>
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
# di-calendar-picker 日历
路径：components/di-calendar-picker.vue
描述：日历选择器组件，封装u-calendar，适配form
案例：
diboot-mobile-ui/pages/demo/form
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| value | 使用v-model双向绑定 | String | - | Y |
| placeholder | 提示信息 | String | 请选择日期 | N |
| active-bg-color | 激活的背景色 | String | #19be6b | N |
| range-bg-color | 激活范围的背景色 | String | #dbf1e1 | N |
| range-color | 激活范围的字体颜色 | String | #18b566 | N |
| mode | 模式选择，[date,range]-[日期模式,选择日期范围] | String | date | N |
- 事件
| 名称 | 说明 |
|---|---|
| confirm | 点击确定按钮，传递出所选的完整的时间对象，与uview的u-calendar返回值一致 |
# di-date-picker 时间选择器
路径：components/di-date-picker.vue
描述：时间选择器，支持yyyy-MM-dd HH:mm:ss，yyyy-MM-dd两种格式
案例：
diboot-mobile-ui/pages/demo/form
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| value | 使用v-model双向绑定 | String | - | Y |
| placeholder | 提示信息 | String | 请选择 | N |
| mode | [date,datetime]-[日期模式（默认yyyy-MM-dd）,日期时间选择(yyyy-MM-dd HH:mm:ss)] | String | date | N |
- 事件
| 名称 | 说明 |
|---|---|
| confirm | 点击确定按钮，传递出所选的完整的时间对象，完整数据参考u-picker mode='time'模式 |
mode=date时与di-calendar-picker返回结果相同
# di-checkbox-list 多选列表
路径：components/di-checkbox-list.vue
描述：checkbox列表组件，封装u-checkbox，适配form
案例：
diboot-mobile-ui/pages/demo/form
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| value | 使用v-model双向绑定 | {String, Array} | - | Y |
| list | LabelValue格式的列表 | Array | - | Y |
| active-color | 激活的背景色 | String | #19be6b | N |
# di-radio-list 单选列表
路径：components/di-radio-list.vue
描述：radio列表组件，封装u-radio，适配form
案例：
diboot-mobile-ui/pages/demo/form
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| value | 使用v-model双向绑定 | {String Boolean, Number} | - | Y |
| list | LabelValue格式的列表 | Array | - | Y |
| active-color | 激活的背景色 | String | #19be6b | N |
# di-region-picker 区域选择器
路径：components/di-region-picker.vue
描述：区域选择器，基于u-picker mode='region'模式，适配form
案例：
diboot-mobile-ui/pages/demo/form
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| value | 使用v-model双向绑定 | String | - | Y |
| placeholder | 提示信息 | String | 请选择 | N |
| city | 是否选择市 | Boolean | true | N |
| area | 是否选择区 | Boolean | true | N |
- 事件
| 名称 | 说明 |
|---|---|
| confirm | 点击确定按钮，传递出所选的完整的区域对象，完整数据参考u-picker mode='region'模式 |
# di-select 选择框
路径：components/di-select.vue
描述：选择框组件，基于u-select，适配form
案例：
diboot-mobile-ui/pages/demo/form
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| value | 使用v-model双向绑定 | {Number String Array} | - | Y |
| list | select展示的列表数据，传入格式与u-select的list保持一致 | Array | - | true |
| placeholder | 提示信息 | String | 请选择 | N |
| mode | 模式选择：[single-column, mutil-column, mutil-column-auto]-[单列模式, 多列模式, 多列联动模式] | String | single-column | N |
- 事件
| 名称 | 说明 |
|---|---|
| confirm | 点击确定按钮，返回u-select的confirm事件保持一致 |
# di-switch 开关
路径：components/di-switch.vue
描述：开关组件，基于u-switch，适配form
案例：
diboot-mobile-ui/pages/demo/form
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| value | 使用v-model双向绑定 | Boolean | - | Y |
# di-upload 上传
路径：components/di-upload.vue
描述：上传组件，基于u-upload，适配form，更加贴合diboot接口服务
案例：
diboot-mobile-ui/pages/demo/form
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| value | 后端返回的文件地址，支持v-model双向绑定 | String | - | Y |
| fileList | 文件存储位置 | array | - | Y |
| rel-obj-type | 绑定的业务对象名，自动设置到form-data对象中 | String | - | Y |
| rel-obj-field | 绑定业务对象的属性，自动设置到form-data对象中 | String | - | Y |
| action | 向后端发送的请求地址 | String | /uploadFile/upload/dto | N |
| form-data | 提交的form-data，优先级最低，单独的属性设置会覆盖对象的配置 | Object | {} | N |
| limit-count | 上传限制数 | Number | 1 | N |
| max-size | 选择单个文件的最大大小 | Number | Number.MAX_VALUE | N |
| show-progress | 是否显示进度条 | Boolean | true | N |
| deletable | 是否显示删除图片的按钮 | Boolean | true | N |
| width | 图片预览区域和添加图片按钮的宽度(单位：rpx), 自动设置到config对象中 | {String Number} | 200 | N |
| height | 图片预览区域和添加图片按钮的高度(单位：rpx), 自动设置到config对象中 | {String Number} | 200 | N |
| upload-text | 上传框里面的文本, 自动设置到config对象中 | string | 上传 | N |
| config | 上传组件配置，优先级最低，单独的属性设置会覆盖对象的配置 | Object | {} | N |
# di-card 图片卡片
路径：components/di-card.vue
描述：图片卡片组件，适合文章列表的图片卡片组件，提供多种卡片展示类型
案例：
diboot-mobile-ui/pages/home/navigation
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| index | 卡片唯一值 | String | - | Y |
| title | 卡片标题 | String | - | Y |
| image-list | 卡片图片 | Array | - | Y |
| mode | 模式选择[default,pictureCard,multiple]-[左图右文字（默认）,大图模式,多图模式] | String | default | N |
- 事件
| 名称 | 说明 |
|---|---|
| click | 点击卡片传递index值 |
# di-descriptions 描述列表
路径：components/di-descriptions.vue、components/di-descriptions-item.vue
描述：成组展示字段，常见于详情页的信息展示。
案例：
diboot-mobile-ui/pages/demo/detail
# di-descriptions
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| title | 头部信息（左侧） | {String slot} | - | N |
| right | 头部右侧 | {String slot} | - | N |
| border | 是否显示边框 | Boolean | false | N |
| border-bottom | 是否显示底部边框，与border分开使用，单位rpx | Boolean | false | N |
| title-bottom | 是否显示title底部边框，单位rpx | Boolean | false | N |
| label-col | label宽度，等分12份，设置后子元素di-descriptions-item可以继承 | {Number String} | 3 | N |
| value-col | value宽度，等分12份，设置后子元素di-descriptions-item可以继承 | {Number String} | 9 | N |
# di-descriptions-item
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| label | label | {String slot} | - | Y |
| value | value | {String Number slot} | - | Y |
| ellipsis | value过长是否显示省略 | Boolean | false | N |
| label-col | label宽度，等分12份，可以继承di-descriptions#label-col | {Number String} | 3 | N |
| value-col | value宽度，等分12份，可以继承di-descriptions#value-col | {Number String} | 9 | N |
# di-scroll-menu-list 滚动菜单
路径：components/di-scroll-menu-list.vue
描述：单行滚动菜单，可以用在首页单行展示多个菜单
案例：
diboot-mobile-ui/pages/home/home
- 属性
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| menu-list | [{title(菜单名称 必填): '', icon（菜单icon 必填）: '', path（跳转路径 非必填）: ''}] | Array | - | Y |
- 事件
| 名称 | 说明 |
|---|---|
| click | 传递当前点击的menu，如果menu包含path，则自动跳转至该path页面 |