Preview 表单预览，常用的布局组件。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 previewData 属性设置 preview 数据。

<wui-preview :previewData="previewData"></wui-preview>

  const previewData = ref({
    list: [
      {
        label: '挂号渠道',
        value: '微信小程序',
      },
      {
        label: '取号时间',
        value: '2023-05-30',
      },
      {
        label: '预估候诊时间',
        value: '08:30-09:20',
      },
      {
        label: '医院地址',
        value: '浙江省杭州市上城区学士路1号',
        valueColor: '#1396FF',
      },
      {
        label: '科室',
        value: '妇科教学门诊',
      },
      {
        label: '就诊地址',
        value: '保健大楼5楼',
      },
      {
        label: '医生',
        value: '张三丰',
      },
      {
        label: '发票号',
        value: '51888888',
      },
      {
        label: '取号密码',
        value: '51888888',
      },
      {
        label: '订单编号',
        value: '5188888851888888',
      },
      {
        label: '费用',
        value: '¥0.00',
      },
      {
        label: '患者信息',
        value: '张三 男 32岁',
      },
      {
        label: '身份证号',
        value: '4306****9006191935',
      },
      {
        label: '手机号码',
        value: '152****3756',
      },
    ],
  });

Slots

插槽名称	说明
default	标签内显示内容，位于按钮上方

Props

属性名	类型	说明	默认值	平台差异说明
previewData	Object	preview数据，数据格式参考下方详细介绍	{ }	-
fields	Object	preview数据源键名（key），具体查看下方详细介绍	{ }	-
background	String	preview背景色	#fff	非nvue下默认值为空，可通过css变量（--wui-bg-color）改变背景色
marginTop	Number, String	preview margin-top值	0	-
marginBottom	Number, String	preview margin-bottom值	0	-
padding	Number, String	preview内容左右padding值	32	-
labelWidth	Number, String	preview标签宽度，单位rpx，为0则为auto	0	-
labelAlign	String	preview标签对齐方式，可选值：left、right、justify	left	非nvue端生效，设为justify（两端对齐）时，必须设置labelWidth 值
labelColor	String	preview标签字体颜色	#7F7F7F	非nvue下默认值为空，可通过css变量（--wui-color-subtitle）改变字体颜色
hdLabelSize	Number, String	preview头部标签字体大小，单位rpx	32	-
hdValSize	Number, String	preview头部内容字体大小，单位rpx	36	-
hdValColor	String	preview头部内容字体颜色	#181818	非nvue下默认值为空，可通过css变量（--wui-color-title）改变字体颜色
bdSize	Number, String	preview内容列表字体大小，单位rpx	28	-
bdColor	String	preview内容列表字体颜色	#181818	非nvue下默认值为空，可通过css变量（--wui-color-title）改变字体颜色
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变量（--wui-color-border）改变border颜色

previewData数据格式详细说明

previewData 为 Object 类型，以下为约定属性，约定键名可通过 fields 属性配置，可自定义加入其他属性一并传入。

//约定属性如下：
const previewData = ref({
    label: '订单金额',
    value: '￥29.90',
    list: [
      {
        label: '订单号',
        // labelColor:'#FF2B2B',
        value: 'Wui00000111112',
        valueColor: '#FF2B2B',
      },
      {
        label: '物流单号',
        value: '34409992021080911',
      },
      {
        label: '创建时间',
        value: '2021-08-09 09:20',
      },
      {
        label: '付款时间',
        value: '2021-08-09 09:30',
      },
      {
        label: '订单备注',
        value: '路上请安全第一，如果超时可提前按已送达或与我联系。辛苦了！',
      },
    ],
    buttons: [
      {
        text: '联系客服',
      },
    ],
  });

数据源约定键名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

Events

事件名	说明	回调参数
@click	点击按钮时触发	{ index:按钮索引 ...buttons[index]:对应索引按钮数据 }