Preview 表单预览

fui-preview 将标签与内容按行展示，并可在底部提供操作按钮。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<template>
  <!-- 订单信息预览 -->
  <fui-preview :previewData="previewData" @click="handlePreviewClick" />
</template>

<script>
export default {
  data() {
    return {
      // 预览内容和底部按钮
      previewData: {
        label: '合计',
        value: '¥ 88.00',
        list: [
          { label: '商品', value: '示例商品' },
          { label: '数量', value: '1' }
        ],
        buttons: [{ text: '确认' }]
      }
    };
  },
  methods: {
    /** 处理底部按钮点击 */
    handlePreviewClick(button) {
      uni.showToast({ title: button.text, icon: 'none' });
    }
  }
};
</script>

数据结构

previewData 默认通过 label、value 设置头部，通过 list 设置明细，通过 buttons 设置底部按钮。明细项支持 label、value、labelColor 和 valueColor；按钮支持 text、color、disabled。fields 可配置这些字段使用的其他键名。

属性

尺寸和间距默认单位为 rpx。

属性	类型	说明	官网默认值
previewData	Object	预览数据	{}
fields	Object	数据字段名映射	{}
background	String	背景色	#fff
marginTop	Number / String	上外边距	0
marginBottom	Number / String	下外边距	0
padding	Number / String	左右内边距	32
labelWidth	Number / String	明细标签宽度，0 为自动宽度	0
labelAlign	String	明细标签对齐方式，支持 left、right、justify	left
labelColor	String	标签颜色	#7F7F7F
labelRight	Number / String	标签右侧间距	32
hdLabelWidth	Number / String	头部标签宽度，0 为自动宽度	0
hdLabelSize	Number / String	头部标签字体大小	32
hdValSize	Number / String	头部内容字体大小	36
hdValColor	String	头部内容颜色	#181818
bdSize	Number / String	明细字体大小	28
bdColor	String	明细内容颜色	#181818
bdAlign	String	内容对齐方式，支持 left、right	right
btnSize	Number / String	底部按钮字体大小	32
highlight	Boolean	按钮点击时是否显示反馈	true
hdLeft	Number / String	头部分隔线左侧间距	32
hdRight	Number / String	头部分隔线右侧间距	0
isBorder	Boolean	是否显示外层上下边框	true
borderColor	String	边框和分隔线颜色	#eee

事件

事件	说明	回调参数
click	点击未禁用的底部按钮时触发	包含 index 和按钮字段的对象
valueClick	点击明细内容时触发	{ index, item }，分别为明细索引和数据

方法

通过组件实例的 setValue(index, value) 可更新指定索引的明细值。

插槽

插槽	说明
default	明细与底部按钮之间的内容

平台说明

本地源码中，非 nvue 平台的部分颜色属性默认为空字符串，由样式变量提供颜色；nvue 使用表中的颜色默认值。