Button 按钮

常用的操作按钮。

基础用法

<my-button>默认按钮</my-button>
<my-button type="primary">主要按钮</my-button>
<my-button type="success">成功按钮</my-button>
<my-button type="warning">警告按钮</my-button>
<my-button type="danger">危险按钮</my-button>

不同尺寸

<my-button size="large">大按钮</my-button>
<my-button>默认按钮</my-button>
<my-button size="small">小按钮</my-button>

带图标的按钮

通过 icon 属性设置图标，支持 SVG path 和字体图标 class。

<my-button type="primary" icon="M12 2C6.48 2 2...">确认</my-button>
<my-button type="success" icon="M9 16.2L4.8 12...">完成</my-button>
<my-button type="danger" icon="M6 19c0 1.1...">删除</my-button>

也可以使用 icon 插槽 放置自定义 SVG：

<my-button type="primary">
  <template #icon>
    <svg viewBox="0 0 24 24">...</svg>
  </template>
  添加用户
</my-button>

仅图标按钮

设置了 circle 且不传文字内容时，自动变为仅图标模式。

<!-- circle + icon = 仅图标按钮 -->
<my-button circle type="primary" icon="M12 2C6.48 2..." />
<my-button circle type="success" icon="M9 16.2L4.8 12..." />
<my-button circle type="danger" icon="M6 19c0 1.1..." />

加载状态

<my-button type="primary" :loading="loading" @click="submit">
  {{ loading ? '提交中...' : '提交' }}
</my-button>
<my-button type="primary" loading>加载中</my-button>

加载状态带图标

加载时也可以同时展示图标。

<my-button type="primary" loading icon="M12 2C6.48...">确认提交</my-button>

社交按钮

内置 8 种社交平台品牌色和图标，开箱即用。

<my-button social="github">GitHub</my-button>
<my-button social="twitter">Twitter</my-button>
<my-button social="wechat">微信</my-button>
<my-button social="facebook">Facebook</my-button>
<my-button social="google">Google</my-button>
<my-button social="linkedin">LinkedIn</my-button>
<my-button social="weibo">微博</my-button>
<my-button social="qq">QQ</my-button>

社交按钮也支持图标模式：

<my-button circle social="github" />
<my-button circle social="twitter" />
<my-button circle social="wechat" />

自定义渲染

通过 prepend / append 插槽，或完全自定义 default 插槽来实现复杂的按钮内容。

<!-- prepend 插槽 -->
<my-button type="primary">
  <template #prepend>
    <span>NEW</span>
  </template>
  新功能上线
</my-button>

<!-- 自定义 default 插槽（富文本内容） -->
<my-button>
  <span style="display:flex;align-items:center;gap:8px;">
    <img src="..." /> 使用 Google 登录
  </span>
</my-button>

其他状态

<my-button disabled>禁用按钮</my-button>
<my-button round>圆角按钮</my-button>
<my-button plain>朴素按钮</my-button>
<my-button text>文本按钮</my-button>

组件结构

根元素是一个原生 <button>，内部按顺序包含：loading 图标 __loading、社交/自定义图标 __icon、前置插槽 __prepend、默认插槽 __content、后置插槽 __append。

CSS 类名

类名	说明
.my-button	根元素
.my-button--default	默认类型
.my-button--primary	主要类型
.my-button--success	成功类型
.my-button--warning	警告类型
.my-button--danger	危险类型
.my-button--info	信息类型
.my-button--social	社交按钮
.my-button--icon-only	仅图标模式
.is-large	大尺寸
.is-small	小尺寸
.is-disabled	禁用状态
.is-loading	加载状态
.is-round	圆角
.is-circle	圆形
.is-plain	朴素样式
.is-text	文本样式
.my-button__loading	加载容器
.my-button__loading-icon	加载旋转图标
.my-button__icon	图标容器
.my-button__prepend	前置内容
.my-button__content	默认插槽内容
.my-button__append	后置内容

API

属性	说明	类型	默认值
type	按钮类型	'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'	'default'
size	按钮尺寸	'large' | 'default' | 'small'	'default'
icon	图标(SVG path 或字体图标 class)	string	—
social	社交平台	'github' | 'twitter' | 'wechat' | 'facebook' | 'google' | 'linkedin' | 'weibo' | 'qq'	—
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
round	是否圆角	boolean	false
circle	是否圆形(仅图标模式)	boolean	false
plain	是否朴素	boolean	false
text	是否文本	boolean	false
nativeType	原生 type	'button' | 'submit' | 'reset'	'button'
autofocus	是否自动聚焦	boolean	false

事件	说明
click	点击按钮

插槽	说明
default	按钮内容
icon	图标(优先级高于 icon 属性)
prepend	前置内容
append	后置内容