DataPay 套餐购买卡片

使用 avue-data-pay 展示套餐购买卡片，通过 option 提供配置和数据。

使用示例

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

点击“查看方案”，下方显示选中的套餐名称；示例仅演示界面和回调。

正在加载示例…

<template>
  <avue-data-pay :option="option" />
  <el-alert :title="selected ? '已选择：' + selected : '点击查看方案，观察回调结果'" type="info" :closable="false" />
</template>

<script setup>
import { ref } from 'vue';

const selected = ref('');
const selectPlan = (item) => { selected.value = item.title; };
const option = ref({
  span: 8,
  decimals: 0,
  data: [
    { title: '基础版', src: '/images/logo.png', money: 299, dismoney: 199, tip: '/ 年', color: '#64748b', subtext: '查看方案', click: selectPlan,
      list: [{ title: '基础组件', check: true }, { title: '在线文档', check: true }, { title: '专属支持', check: false }] },
    { title: '专业版', src: '/images/logo.png', money: 599, dismoney: 399, tip: '/ 年', color: '#409eff', subtext: '查看方案', click: selectPlan,
      list: [{ title: '基础组件', check: true }, { title: '进阶示例', check: true }, { title: '专属支持', check: false }] },
    { title: '团队版', src: '/images/logo.png', money: 999, dismoney: 699, tip: '/ 年', color: '#67c23a', subtext: '查看方案', click: selectPlan,
      list: [{ title: '完整组件', check: true }, { title: '团队协作', check: true }, { title: '专属支持', check: true }] }
  ]
});
</script>

Props

参数	类型	默认值	说明
option	object	建议显式传入 { data: [] }	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	卡片数据，按数组顺序显示
span	number	6	中等及以上屏幕的 24 栅格占位，24 / span 为每行数量
animation	boolean	true（CountUp 默认）	数字动画，传 false 可整体关闭
decimals	number	0	数字小数位数

data 数据项

字段	类型	默认值	说明
title / subtitle	string	—	套餐名称及副标题
src	string	—	套餐插图地址
color	string	—	顶部、金额及按钮颜色
money	number / string	—	划线原价
dismoney	number	—	CountUp 展示的当前价格
tip / subtext	string	—	价格后缀（例如 / 年）及按钮文字
list	array	[]	权益列表，字段见下文
animation / decimals	boolean / number	继承 option	单项数字配置；当前使用逻辑或回退，false / 0 不能覆盖 option 中的 true / 非零小数位
href	string	—	点击时跳转的地址；仅执行回调时可不设置
click	function	—	点击调用 click(item)，接收当前原始数据项

使用说明

list 每项支持 title（权益标题）、check（是否包含）、href（权益链接）、tip（提示内容，按 HTML 渲染）。只为可信内容配置 tip。money 或 dismoney 为真值时显示价格区域；当前价格为 0 且没有原价时不会显示价格。

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

事件与回调

组件没有通过 $emit 定义业务事件。data[i].click(item) 是配置回调，接收原始数据项；它不是组件 @click 的数据事件。配置 href 时还会进行链接跳转。

插槽与方法

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

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