Snackbar 底部通知
单行胶囊通知，自带 action 按钮（如 Undo），支持 6 种位置。
基础用法
与 Toast 区别：单行、胶囊形、带 action。常用场景：删除后的”撤销”。
<CfSnackbar
v-model:open="open"
tone="success"
message="Deleted login.request"
action-label="撤销"
action-shortcut="⌘Z"
@action="undo"
/><CfSnackbar
open={open}
onOpenChange={setOpen}
tone="success"
message="Deleted login.request"
actionLabel="撤销"
actionShortcut="⌘Z"
onAction={undo}
/>6 种 placement
默认 bottom-center，常用替代是 top-right（不挡底部内容）。
<CfSnackbar v-model:open="open" placement="bottom-right" message="…" /><CfSnackbar open={open} onOpenChange={setOpen} placement="bottom-right" message="…" />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
open / v-model:open | boolean | — | |
tone | 'default' | 'success' | 'warning' | 'error' | 'info' | 'default' | 含图标 |
placement | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | |
duration | number | 5000 | ms，0 不自动关 |
actionLabel | string | — | 操作按钮文案 |
actionShortcut | string | — | 操作右侧快捷键 |
showDismiss | boolean | true | 显示 × 按钮 |
反馈与讨论
Snackbar 底部通知 的讨论