cd-usercard

用户名片组件，基于 Vue 3 + TDesign + RemixIcon 实现。

安装

npm install cd-usercard
# 或
pnpm add cd-usercard

依赖

• Vue 3.3+
• TDesign Vue Next 1.0+
• RemixIcon (需要在项目中引入)

npm install tdesign-vue-next remixicon

在入口文件引入 RemixIcon 样式：

import 'remixicon/fonts/remixicon.css';

使用

全局注册

import { createApp } from 'vue';
import CdUserCard from 'cd-usercard';
import App from './App.vue';

const app = createApp(App);
app.use(CdUserCard);
app.mount('#app');

局部引入

<script setup>
import { CdUserCard } from 'cd-usercard';
</script>

<template>
  <CdUserCard
    name="张三"
    role="产品经理"
    department="解决方案部"
    email="[email protected]"
    mobile="138-0000-0000"
  />
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | avatar | string | - | 头像 URL | | name | string | - | 姓名（必填） | | alias | string | - | 别名/英文名 | | subtitle | string | - | 副标题 | | role | string | - | 角色/职位 | | department | string | - | 部门 | | employeeId | string | - | 工号 | | email | string | - | 邮箱 | | mobile | string | - | 手机 | | telephone | string | - | 座机 | | location | string | - | 地点 | | joinDate | string | - | 入职日期 | | signature | string | - | 个性签名 | | tags | string[] | - | 标签列表 | | status | 'online' | 'offline' | 'busy' | 'away' | 'online' | 在线状态 | | showStatus | boolean | false | 是否显示状态 | | size | 'small' | 'medium' | 'large' | 'medium' | 尺寸 | | showDetails | boolean | true | 是否显示详情 | | showActions | boolean | true | 是否显示操作按钮 | | showChat | boolean | true | 是否显示聊天按钮 | | showPhone | boolean | true | 是否显示电话按钮 | | showMore | boolean | false | 是否显示更多按钮 | | clickable | boolean | false | 卡片是否可点击 | | maxTags | number | 4 | 最多显示标签数 |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | click | user: UserCardProps | 点击卡片时触发（需 clickable=true） | | chat | user: UserCardProps | 点击聊天按钮时触发 | | phone | user: UserCardProps | 点击电话按钮时触发 | | email | email: string | 点击邮箱时触发 | | more | user: UserCardProps | 点击更多按钮时触发 |

Slots

| 插槽名 | 说明 | |--------|------| | actions | 自定义操作按钮区域 | | footer | 自定义底部区域 |

示例

基础用法

<CdUserCard
  avatar="https://example.com/avatar.jpg"
  name="张三"
  alias="Zane"
  role="产品经理"
  department="解决方案部"
  employee-id="A102938"
  email="[email protected]"
  mobile="138-0000-0000"
  signature="专注体验，追求极致。"
  :tags="['全职', 'PMP']"
/>

带在线状态

<CdUserCard
  name="张三"
  role="产品经理"
  status="online"
  :show-status="true"
/>

可点击卡片

<CdUserCard
  name="张三"
  role="产品经理"
  :clickable="true"
  @click="handleClick"
/>

自定义底部

<CdUserCard name="张三" role="产品经理">
  <template #footer>
    <t-button theme="primary" block>发起会话</t-button>
  </template>
</CdUserCard>