Skip to content
仅桌面端保证样式

CodeBlock 命令块

EwCodeBlock 以 macOS 窗框的形态展示安装命令与代码片段:红绿灯标题栏、提示符前缀与 一键复制(复制成功后按钮变绿并打勾)。颜色全部走语义令牌,明暗双主题自动跟随。

基础用法

窗框 + 提示符 + 一键复制
复制按钮在标题栏右侧;试试点它,观察成功反馈。
$brew install --cask nimbus
vue
<EwCodeBlock prefix="$" code="brew install --cask nimbus" />

标题栏与按钮文字

title / show-copy-text
title 显示在红绿灯旁;复制按钮可带文字。
Terminal
npx nimbus init my-site
vue
<EwCodeBlock title="Terminal" code="npx nimbus init my-site" show-copy-text />

放置建议

命令块通常出现在 Hero 动作区下方或下载页;复制事件 copy(text) 可用于埋点统计。

API

Props

属性说明类型默认值
code代码/命令文案string
prefix提示符前缀(如 $string
title标题栏文案string
copyable展示复制按钮booleantrue
show-copy-text复制按钮带文字booleanfalse

插槽

插槽说明
default覆写代码内容(可承载高亮标记)
title标题覆写

事件

事件说明参数
copy复制成功text

基于 MIT 许可证发布