cd-usercard

cd-usercard

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

安装

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

依赖要求

本组件依赖以下包，请确保项目中已安装：

pnpm add vue tdesign-vue-next cd-personselector remixicon

或在 package.json 中添加：

{
  "dependencies": {
    "vue": "^3.3.0",
    "tdesign-vue-next": "^1.0.0",
    "cd-personselector": "^1.1.0",
    "cd-usercard": "^2.3.1"
  }
}

在入口文件引入 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="[e-mail]"
    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="[e-mail]"
  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>