Preview 表单预览 
概述
Preview 表单预览，常用的布局组件。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiPreview from "@/components/firstui/fui-preview/fui-preview.vue"
export default {
components:{
fuiPreview
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 previewData 属性设置preview数据。
<fui-preview :previewData="previewData"></fui-preview>
1
previewData: {
label: '订单金额',
value: '￥29.90',
list: [{
label: '订单号',
value: 'Fui00000111112',
valueColor: '#FF2B2B'
}, {
label: '物流单号',
value: '34409992021080911'
}, {
label: '创建时间',
value: '2021-08-09 09:20'
}, {
label: '付款时间',
value: '2021-08-09 09:30'
}, {
label: '订单备注',
value: '路上请安全第一，如果超时可提前按已送达或与我联系。辛苦了！'
}],
buttons: [{
text: '联系客服'
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示内容，位于按钮上方 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| previewData | Object | preview数据，数据格式参考下方详细介绍 | { } | - |
| fields V1.7.0+ | Object | preview数据源键名（key），具体查看下方详细介绍 | { } | - |
| background | String | preview背景色 | #fff | 非nvue下默认值为空，可通过css变量（--fui-bg-color）改变背景色 |
| marginTop | Number, String | preview margin-top值 | 0 | - |
| marginBottom | Number, String | preview margin-bottom值 | 0 | - |
| padding | Number, String | preview内容左右padding值 | 32 | - |
| labelWidth V1.7.0+ | Number, String | preview标签宽度，单位rpx，为0则为auto | 0 | - |
| labelAlign V1.7.0+ | String | preview标签对齐方式，可选值：left、right、justify | left | 非nvue端生效，设为justify（两端对齐）时，必须设置labelWidth 值 |
| labelColor | String | preview标签字体颜色 | #7F7F7F | 非nvue下默认值为空，可通过css变量（--fui-color-subtitle）改变字体颜色 |
| labelRight V1.9.9+ | Number, String | preview标签margin-right值，单位rpx | 32 | - |
| hdLabelWidth V1.9.9+ | Number, String | preview头部标签宽度，单位rpx，为0则为auto | 0 | - |
| hdLabelSize | Number, String | preview头部标签字体大小，单位rpx | 32 | - |
| hdValSize | Number, String | preview头部内容字体大小，单位rpx | 36 | - |
| hdValColor | String | preview头部内容字体颜色 | #181818 | 非nvue下默认值为空，可通过css变量（--fui-color-title）改变字体颜色 |
| bdSize | Number, String | preview内容列表字体大小，单位rpx | 28 | - |
| bdColor | String | preview内容列表字体颜色 | #181818 | 非nvue下默认值为空，可通过css变量（--fui-color-title）改变字体颜色 |
| bdAlign V1.9.9+ | String | preview内容文本对齐方式，可选值：left、right | right | - |
| btnSize | Number, String | preview按钮字体大小，单位rpx | 32 | - |
| highlight | Boolean | 按钮是否有点击效果 | true | - |
| hdLeft | Number, String | preview头部底部border left值，单位rpx | 32 | - |
| hdRight | Number, String | preview头部底部border right值，单位rpx | 0 | - |
| isBorder | Boolean | 是否需要preview外层上下border | true | - |
| borderColor | String | preview border颜色值 | #eee | 非nvue下默认值为空，可通过css变量（--fui-color-border）改变border颜色 |
previewData数据格式详细说明
previewData 为Object类型，以下为约定属性，约定键名可通过 fields属性配置，可自定义加入其他属性一并传入。
//约定属性如下：
previewData: {
//head 标签
label: '订单金额',
//head 内容值
value: '￥29.90',
//body 列表
list: [{
//标签
label: '订单号',
//当前标签字体颜色，可选。不传值默认使用属性 labelColor 值。（V1.3.0）
labelColor:'#FF2B2B',
//内容值
value: 'Fui00000111112',
//当前内容值字体颜色，可选。不传值默认使用属性 bdColor 值。（V1.3.0）
valueColor: '#FF2B2B'
}, {
//标签
label: '物流单号',
//当前标签字体颜色，可选。不传值默认使用属性 labelColor 值。（V1.3.0）
labelColor:'#FF2B2B',
//内容值
value: '34409992021080911',
//当前内容值字体颜色，可选。不传值默认使用属性 bdColor 值。（V1.3.0）
valueColor: '#FF2B2B'
}],
//按钮列表，可设置多个按钮，不设置则不显示
buttons: [{
//按钮文本
text: '联系客服',
//按钮字体颜色
color: '#181818'
}]
}
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
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
数据源约定键名fields属性详细说明，可通过fields属性传值修改默认键名
| 键名（key） | 说明 | 默认值 |
|---|---|---|
| label | 标签键名（String） | label |
| value | 内容值键名（String） | value |
| list | 列表键名（String） | list |
| labelColor | 当前标签字体颜色键名（String） | labelColor |
| valueColor | 当前内容值字体颜色键名（String） | valueColor |
| buttons | 按钮列表键名（String） | buttons |
| text | 按钮文本键名（String） | text |
| color | 按钮字体颜色键名（String） | color |
| disabled V2.1.0+ | 按钮是否禁用键名（String） | disabled |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击按钮时触发 | { index:按钮索引 ...buttons[index]:对应索引按钮数据 } |
| @valueClick V2.0.0+ | list内容点击时触发 | { index:item索引 ...list[index]:对应索引item数据 } |
# Methods
通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| setValue V2.0.0+ | 设置list对应行内容，结合@valueClick事件使用 | (index,value) (list索引,替换的值) |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。