Preview 表单预览

介绍

表单预览组件通常用于展示表单数据，执行操作等等。

导入

import Preview from '@/components/display/Preview.vue'

用法

基础用法

使用 Preview 组件展示表单数据，支持文本和图片类型的值。

<template>
  <Preview 
    title="订单金额"
    desc="订单号 XX00000324234988"
    extra="￥88.80"
    :extraProps="{
      color: 'danger',
      fontSize: 40,
    }"
    :items="[{
      title: '物流单号',
      value: '21321654009562600343',
    },
    {
      title: '创建时间',
      value: '2025-12-20 09:20',
    },
    {
      title: '付款时间',
      value: '2025-12-20 09:30',
    },
    {
      title: '发货前照片',
      value: 'https://imengyu.top/assets/images/test/2.jpg',
      valueType: 'image',
    },
    {
      title: '包裹照片',
      value: [
        'https://imengyu.top/assets/images/test/2.jpg',
        'https://imengyu.top/assets/images/test/3.jpg',
      ],
      valueType: 'image',
    },
    {
      title: '订单备注',
      value: '客户要求安全配送至收获地址，送达后需要及时联系，当面签收。请快递员注意配送，谢谢！',
    }]"
  />
</template>

展示操作按钮

在表单预览组件底部添加操作按钮。

<template>
  <Preview 
    title="订单金额"
    desc="订单号 XX00000324234988"
    extra="￥88.80"
    :extraProps="{
      color: 'danger',
      fontSize: 40,
    }"
    :items="[
      {
        title: '物流单号',
        value: '21321654009562600343',
      },
      {
        title: '创建时间',
        value: '2025-12-20 09:20',
      },
      {
        title: '过期时间',
        value: '2025-12-20 09:30',
      }
    ]"
    :actions="[
      {
        text: '查看商品',
        color: 'primary',
      },
      {
        text: '取消订单',
        color: 'danger',
      }
    ]"
  />
</template>

API 参考

Preview

表单预览组件。

Props

名称	说明	类型	必填	默认值
title	大标题	string	否	-
desc	副标题	string	否	-
extra	大标题右侧额外信息	string	否	-
extraProps	大标题右侧额外信息文字属性	TextProps	否	{}
backgroundColor	卡片背景颜色	string	否	'white'
items	项目列表	{ title: string, value: string | string[], valueType?: 'text' | 'image' }[]	否	-
actions	操作按钮列表	{ text: string, color?: string, props?: ButtonProp, onClick?: (item) => void }[]	否	-
titleProps	项目标题文字属性	TextProps	否	{}
titleWidth	项目标题宽度	string | number	否	300
titleColor	项目标题文字颜色	string	否	'text.second'
valueProps	项目值文字属性	TextProps	否	{}
valueColor	项目值文字颜色	string	否	'text.content'

Slots

名称	说明
title	标题区域
items	项目区域
actions	操作区域

主题变量

名称	类型	默认值	说明
PreviewBackgroundColor	string	'white'	卡片背景颜色
PreviewExtraTextProps	object	{}	大标题右侧额外信息文字属性
PreviewTitleColor	string	'text.second'	项目标题文字颜色
PreviewValueColor	string	'text.content'	项目值文字颜色
PreviewItemTitleWidth	number	300	项目标题宽度
PreviewItemTitleTextProps	object	{}	项目标题文字属性
PreviewItemValueTextProps	object	{}	项目值文字属性
PreviewPadding	number	30	内边距
PreviewItemVerticalPadding	number	10	项目垂直内边距
PreviewItemGap	number	20	项目间距