Skip to content
双端兼容 · 桌面 + 移动

Keycap 键帽

EwKeycap 以键帽的视觉形态展示键盘快捷键,常用于产品说明文案与帮助提示,例如 「按 c 复制」或「按 Cmd K 呼出搜索」。

基础用法

单键与组合键
传入字符串时逐字符拆分为多个键帽;组合键传数组。

c 复制邮箱地址

CmdK 呼出全局搜索

vue
按 <EwKeycap keys="c" /> 复制邮箱地址
按 <EwKeycap :keys="['Cmd', 'K']" /> 呼出全局搜索

API

Props

属性说明类型默认值
keys单键字符串(逐字符拆分)或组合键数组string / string[]必填

TIP

键帽的立体感来自底部加粗边框(border-bottom-width: 2px)与轻投影,跟随明暗主题令牌自动适配。

基于 MIT 许可证发布