Skip to content

Button 按钮

Minecraft 风格立体按钮:深色描边 + inset 高光厚度,按下整体下沉。

三种语义

vue
<mc-button variant="primary" @click="onStart">主操作</mc-button>
<mc-button variant="normal">次要</mc-button>
<mc-button variant="error">危险</mc-button>
<mc-button variant="normal" disabled>禁用</mc-button>

尺寸

vue
<mc-button size="extra_small">特小</mc-button>
<mc-button size="small">小</mc-button>
<mc-button size="middle">中</mc-button>
<mc-button size="large">大</mc-button>

图标

icon 属性接收内置图标名称,按钮会在文字左侧显示图标。

vue
<mc-button icon="mc-save" variant="primary">保存</mc-button>
<mc-button icon="mc-delete" variant="error">删除</mc-button>
<mc-button icon="mc-key-enter">确认</mc-button>

带 Tooltip

这是提示文本
vue
<mc-button variant="primary" tip="这是提示文本">悬停查看</mc-button>

Props

名称类型默认说明
variant'normal' | 'primary' | 'error'normal颜色/语义
size'extra_small' | 'small' | 'middle' | 'large'middle尺寸
disabledbooleanfalse是否禁用(禁用时不触发 click、不播音效)
iconstring''左侧图标名称,如 mc-savemc-key-entermc-x-creative
tipstring''非空则显示 Tooltip

Events

事件参数说明
clickMouseEvent点击(禁用时不触发);主操作按钮播 button 音,其余播 click

按钮文字通过默认插槽传入。

MIT Licensed · 设计语言移植自 Spectrollay-McUI