反馈提示 Feedback

Toast 顶部居中 · 多条叠层堆叠 · RdConfirmDialog · RdEmpty · 角标与 Tooltip。对齐 Design System Showcase。

轻提示预览 Toast Static

静态叠层预览（直接挂 RdToastItem）；实际业务请用下方 Live API。

操作成功

客户状态已更新

请注意

该操作会影响 12 条记录

提示

这是一条信息

操作失败

网络超时

<script setup lang="ts">
import { RdToastItem } from '@rd-element/ui'
</script>

<template>
  <div class="demo-stack" style="max-width:360px;gap:8px">
    <RdToastItem :toast="{ id: 1, type: 'success', title: '操作成功', body: '客户状态已更新', duration: 0 }" />
    <RdToastItem :toast="{ id: 2, type: 'warning', title: '请注意', body: '该操作会影响 12 条记录', duration: 0 }" />
    <RdToastItem :toast="{ id: 3, type: 'info', title: '提示', body: '这是一条信息', duration: 0 }" />
    <RdToastItem :toast="{ id: 4, type: 'error', title: '操作失败', body: '网络超时', duration: 0 }" />
  </div>
</template>

实时轻提示 Toast Live

业务代码调用 useToast() / toast；首次弹出时自动挂到 body。

<script setup lang="ts">
import { useToast } from '@rd-element/ui'

const t = useToast()
</script>

<template>
  <el-button type="success" @click="t.success('保存成功', '客户资料已更新')">
    Success
  </el-button>
  <el-button type="danger" @click="t.error('操作失败', '网络超时')">
    Error
  </el-button>
  <el-button type="warning" @click="t.warning('请注意', '将影响 12 条记录')">
    Warning
  </el-button>
  <el-button type="primary" @click="t.info('提示', '页面不存在')">
    Info
  </el-button>
</template>

确认弹窗 RdConfirmDialog

调用 rdConfirm.confirm() 即可：打开动态挂载、关闭自动卸载，无需根布局常驻。

<script setup lang="ts">
import { rdConfirm, toast } from '@rd-element/ui'
// 无需根布局挂载；confirm() 打开时动态挂载，关闭后卸载

async function demoConfirm(type: 'warning' | 'danger' | 'info') {
  const ok = await rdConfirm.confirm({
    title: type === 'danger' ? '删除客户' : '确认提交？',
    body: '此操作需二次确认。点击遮罩可看到抖动。',
    type,
    confirmText: type === 'danger' ? '确认删除' : '确认',
  })
  toast.info(ok ? '已确认' : '已取消')
}
</script>

<template>
  <el-button type="warning" @click="demoConfirm('warning')">警告确认</el-button>
  <el-button type="danger" @click="demoConfirm('danger')">危险确认</el-button>
  <el-button @click="demoConfirm('info')">信息确认</el-button>
</template>

空状态 RdEmpty

按场景选择 variant：search / data / error / permission。

search · md（表格筛选）

未找到匹配的数据

试试调整关键词，或清除部分筛选条件

data · lg（首访无数据）

还没有客户

创建第一个客户，开始管理你的客群

error · md

加载失败

网络异常，请稍后重试

permission · md

暂无查看权限

请联系管理员开通对应模块权限

search · sm（面板 / 下拉）

无结果

<script setup lang="ts">
import { RdEmpty, toast } from '@rd-element/ui'
</script>

<template>
  <RdEmpty
    variant="search"
    size="md"
    title="未找到匹配的数据"
    hint="试试调整关键词，或清除部分筛选条件"
    show-action
    @action="toast.info('清除筛选')"
  />
</template>

文字提示 el-tooltip

悬停查看更多

<script setup lang="ts">
import { HelpCircle, Info } from '@lucide/vue'
</script>

<template>
  <div class="demo-row" style="gap:16px;align-items:center">
    <el-tooltip content="刷新当前列表数据" trigger="click">
      <el-button size="small"><HelpCircle :size="14" /> 带说明</el-button>
    </el-tooltip>
    <el-tooltip content="仅管理员可导出全量客户">
      <button type="button" class="text-action-btn" aria-label="说明">
        <Info :size="14" />
      </button>
    </el-tooltip>
    <el-tooltip placement="bottom">
      <template #content>
        支持自定义富文本：<strong>重点信息</strong>
      </template>
      <span style="border-bottom:1px dashed var(--rd-color-border-strong);cursor:help">
        悬停查看更多
      </span>
    </el-tooltip>
  </div>
</template>

角标 RdBadge

variant=count 显示数字；dot 仅小红点。父级需 rd-badge-anchor 或 demo-badge-sample 定位。

消息 ³待办 ⁹⁹⁺警告 ²错误 ¹状态 离线

<script setup lang="ts">
import { RdBadge } from '@rd-element/ui'
</script>

<template>
  <span class="demo-badge-sample">消息 <RdBadge :value="3" /></span>
  <span class="demo-badge-sample">待办 <RdBadge :value="128" /></span>
  <span class="demo-badge-sample">警告 <RdBadge :value="2" tone="warning" /></span>
  <span class="demo-badge-sample">错误 <RdBadge :value="1" tone="error" /></span>
  <span class="demo-badge-sample">状态 <RdBadge variant="dot" tone="success" /></span>
  <span class="demo-badge-sample">离线 <RdBadge variant="dot" tone="neutral" /></span>
</template>

API

Toast

属性名	说明	类型	默认值
success	成功反馈；首次调用会自动挂载宿主	(title: string, body?: string, duration?: number) => number	4000
error	失败 / 异常	(title: string, body?: string, duration?: number) => number	5000
warning	风险提示	(title: string, body?: string, duration?: number) => number	4000
info	普通信息	(title: string, body?: string, duration?: number) => number	4000
remove	按 id 关闭；队列空则延迟卸载宿主	(id: number) => void	—
clear	清空队列并卸载宿主	() => void	—
config	设置容器偏移 / zIndex 等（建议首次弹出前调用）	(options: RdToastProps) => void	—

属性名	说明	类型	默认值
maxVisible	叠层最多可见条数，超出仍在队列中	number	4
offset	距视口顶部偏移（px）	number	24
zIndex	容器 z-index	number	9999
ariaLabel	区域无障碍标签	string	'通知'

RdEmpty

属性名	说明	类型	默认值
title	主文案	string	—
hint	辅助说明	string	—
variant	场景图标	'search' | 'data' | 'error' | 'permission'	'search'
size	尺寸	'sm' | 'md' | 'lg'	'md'
showAction	是否显示操作按钮	boolean	false
actionLabel	操作按钮文案	string	—

事件名	说明	类型
action	点击操作按钮	() => void

RdBadge

属性名	说明	类型	默认值
value	数字或文案角标；variant=dot 时可省略	number | string	—
variant	样式	'count' | 'dot'	'count'
tone	语义色	'primary' | 'success' | 'warning' | 'error' | 'neutral'	'primary'
max	超过显示 max+	number	99
showZero	值为 0 时仍显示	boolean	false

rdConfirm.confirm

属性名	说明	类型	默认值
title	标题	string	—
body	说明文案	string	—
type	语义色与图标	'warning' | 'danger' | 'info'	'warning'
confirmText	确认按钮文案	string	'确定'
cancelText	取消按钮文案	string	'取消'

返回 Promise<boolean>（true = 用户确认）。Dialog / Drawer 详见 弹窗与抽屉。