DataProfile 人员信息卡片

使用 avue-data-profile 展示人员信息卡片，通过 option 提供配置和数据。

使用示例

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

比较不同人员的标签、联系方式和统计项；操作按钮接收当前人员对象。

正在加载示例…

<template>
  <div>
    <h3>团队成员</h3>
    <avue-data-profile :option="option1"></avue-data-profile>
    <h3 style="margin-top: 20px;">带统计数据</h3>
    <avue-data-profile :option="option2"></avue-data-profile>
    <el-alert :title="status || '点击发消息或关注查看当前人员回调'" :closable="false" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const status = ref('');
const option1 = ref({
  span: 6,
  data: [
    { name: '张三', title: '前端工程师', avatar: '/images/logo.png', tags: ['Vue', 'React'] },
    { name: '李四', title: '后端工程师', avatar: '/images/logo.png', tags: ['Java', 'Go'] },
    { name: '王五', title: '产品经理', avatar: '/images/logo.png', tags: ['需求分析'] },
    { name: '赵六', title: 'UI设计师', avatar: '/images/logo.png', tags: ['Figma', 'Sketch'] }
  ]
});
const option2 = ref({
  span: 8,
  data: [
    {
      name: '张三',
      title: '高级前端工程师',
      desc: '5年开发经验，专注于Vue生态',
      avatar: '/images/logo.png',
      phone: '138****1234',
      email: 'zhang@example.com',
      tags: ['Vue', 'TypeScript', 'Node.js'],
      stats: [
        { label: '项目', value: 28 },
        { label: '任务', value: 156 },
        { label: '评分', value: 4.9 }
      ],
      actions: [
        { text: '发消息', type: 'primary', click: item => { status.value = '发消息：' + item.name } },
        { text: '关注', type: '', click: 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

data 数据项

字段	类型	默认值	说明
name / title / desc	string	—	姓名、职务和说明
avatar / cover	string	—	头像 / 顶部封面地址；无头像时取姓名首字符
tags	array	[]	字符串或 { text, type }，type 透传给 ElTag
phone / email	string	—	联系方式文本
stats	array	[]	统计项 { label, value }
actions	array	[]	按钮 { text, type, click }，type 默认 primary，click(item) 接收当前人员
backgroundColor	string	#fff	卡片背景色
click	function	—	点击卡片回调 click(item)

使用说明

actions 按钮使用 stop 修饰符，不会继续触发卡片 click。无姓名且无头像时显示问号。

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

事件与回调

组件没有通过 $emit 定义业务事件。data[i].click(item) 是配置回调，接收原始数据项；它不是组件 @click 的数据事件。这些卡片不处理 href，跳转逻辑应写在 click 回调中。

插槽与方法

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

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