Button 按钮

常用的操作按钮，基于 el-button 封装，API 完全兼容。

基础用法

查看代码

<template>
  <MgButton>默认按钮</MgButton>
  <MgButton type="primary">主要按钮</MgButton>
  <MgButton type="success">成功按钮</MgButton>
  <MgButton type="warning">警告按钮</MgButton>
  <MgButton type="danger">危险按钮</MgButton>
  <MgButton type="info">信息按钮</MgButton>
</template>

朴素、圆角与禁用

查看代码

<template>
  <MgButton type="primary" plain>朴素按钮</MgButton>
  <MgButton type="primary" round>圆角按钮</MgButton>
  <MgButton type="primary" disabled>禁用按钮</MgButton>
</template>

加载状态

查看代码

<script setup>
import { ref } from 'vue'
const loading = ref(false)
</script>

<template>
  <MgButton type="primary" :loading="loading" @click="loading = !loading">
    {{ loading ? '加载中...' : '点击加载' }}
  </MgButton>
</template>

Attributes

继承 Element Plus Button 的全部 Attributes，无额外参数。

参数	说明	类型	默认值
type	类型	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	default
size	尺寸	'large' | 'default' | 'small'	default
plain	是否朴素	boolean	false
round	是否圆角	boolean	false
circle	是否圆形	boolean	false
loading	加载中	boolean	false
disabled	是否禁用	boolean	false

与 Element Plus 的差异

MgButton 在 el-button 基础上追加 .mg-button 类名，便于样式覆写；其余行为完全一致，迁移时仅需将 el-button 替换为 MgButton。