DataProduct 商品卡片

使用 avue-data-product 展示商品卡片，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

点击购买或加入购物车，接收当前商品对象并由业务侧处理。

正在加载示例…

<template>
  <div>
    <h3>商品列表</h3>
    <avue-data-product :option="option1" @buy="handleBuy" @cart="handleCart"></avue-data-product>
    <h3 style="margin-top: 20px;">促销商品</h3>
    <avue-data-product :option="option2" @buy="handleBuy" />
    <el-alert :title="status || '点击按钮查看业务回调；不会创建真实订单'" :closable="false" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const status = ref('');
const option1 = ref({
  span: 6,
  data: [
    {
      name: 'iPhone 15 Pro',
      img: '/images/logo.png',
      price: 7999,
      originalPrice: 8999,
      rating: 4.9,
      ratingCount: 1256,
      sales: 5000,
      tag: '新品',
      tagColor: '#409eff'
    },
    {
      name: 'MacBook Pro 14',
      img: '/images/logo.png',
      price: 14999,
      originalPrice: 16999,
      discount: '立减2000',
      rating: 4.8,
      ratingCount: 856,
      sales: 2000
    }
  ]
});
const option2 = ref({
  span: 8,
  showCart: false,
  buyText: '立即抢购',
  data: [
    {
      name: '限时秒杀 - 无线耳机',
      img: '/images/logo.png',
      price: 99,
      originalPrice: 299,
      discount: '3.3折',
      stock: 50,
      tag: '秒杀',
      tagColor: '#f56c6c'
    }
  ]
});
const handleBuy = (item) => {
  status.value = '购买：' + item.name;
};
const handleCart = (item) => {
  status.value = '加入购物车：' + item.name;
};
</script>

Props

参数	类型	默认值	说明
option	object	{}	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	卡片数据，按数组顺序显示
span	number	6	中等及以上屏幕的 24 栅格占位，24 / span 为每行数量
gutter	number	20	栅格间距，单位 px；当前实现传 0 也会回退为 20
priceSymbol	string	¥	价格符号
showActions	boolean	true	是否显示操作按钮
showCart	boolean	true	是否显示加入购物车按钮
buyText	string	立即购买（语言包）	购买按钮文字
ratingColors	array	3 个 #F7BA2A	评分星星颜色

data 数据项

字段	类型	默认值	说明
name / desc / img	string	—	商品名称、描述及图片地址
price / originalPrice	number / string	—	当前价格 / 划线原价
discount	string	—	折扣文字
tag / tagColor	string	— / #f56c6c	角标及背景色
rating / ratingCount	number / number	—	只读评分及评价数量
sales / stock	number / string	—	销量及库存，为 0 时当前模板不显示
click	function	—	卡片点击回调 click(item)
onBuy / onCart	function	—	购买 / 加入购物车回调，均接收 item

使用说明

先触发组件 buy/cart 事件，再调用 item.onBuy/onCart；不要在两处重复提交订单。按钮点击不会触发卡片 click。组件不维护购物车或库存。

span 使用 Element Plus 的 24 栅格体系。布局随屏幕宽度切换，不要把它当成像素宽度；给数字字段传原始数值，单位使用对应的文本字段。

事件与回调

事件	触发时机	载荷
buy	点击购买按钮	item
cart	点击加入购物车按钮	item

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。