Button 按钮

常用的操作按钮。

基础用法

基础的按钮用法。

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

<script setup lang="ts">
import { MButton } from 'moonwind-ui'
</script>

不同类型

按钮有五种类型：默认按钮、主要按钮、成功按钮、警告按钮和危险按钮。

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

<script setup lang="ts">
import { MButton } from 'moonwind-ui'
</script>

禁用状态

按钮不可用状态。

<template>
  <div class="button-demo">
    <MButton disabled>默认按钮</MButton>
    <MButton type="primary" disabled>主要按钮</MButton>
    <MButton type="success" disabled>成功按钮</MButton>
    <MButton type="warning" disabled>警告按钮</MButton>
    <MButton type="danger" disabled>危险按钮</MButton>
  </div>
</template>

<script setup>
import { MButton } from "moonwind-ui";
</script>

<style scoped>
.button-demo {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

<template>
  <div class="button-demo">
    <MButton :loading="loading1" @click="loading1 = true">默认按钮</MButton>
    <MButton type="primary" :loading="loading2" @click="loading2 = true">主要按钮</MButton>
    <MButton type="success" :loading="loading3" @click="loading3 = true">成功按钮</MButton>
    <MButton type="warning" :loading="loading4" @click="loading4 = true">警告按钮</MButton>
    <MButton type="danger" :loading="loading5" @click="loading5 = true">危险按钮</MButton>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { MButton } from 'moonwind-ui'

const loading1 = ref(false)
const loading2 = ref(false)
const loading3 = ref(false)
const loading4 = ref(false)
const loading5 = ref(false)
</script>

<style scoped>
.button-demo {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

<template>
  <div class="button-demo">
    <div class="demo-row">
      <MButton size="large">大型按钮</MButton>
      <MButton size="large" type="primary">大型按钮</MButton>
    </div>
    <div class="demo-row">
      <MButton size="medium">中型按钮</MButton>
      <MButton size="medium" type="primary">中型按钮</MButton>
    </div>
    <div class="demo-row">
      <MButton size="small">小型按钮</MButton>
      <MButton size="small" type="primary">小型按钮</MButton>
    </div>
  </div>
</template>

<script setup>
import { MButton } from "moonwind-ui";
</script>

<style scoped>
.button-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>

圆角按钮

通过 round 属性来设置圆角按钮。

<template>
  <div class="button-demo">
    <div class="demo-row">
      <MButton round>默认按钮</MButton>
      <MButton type="primary" round>主要按钮</MButton>
      <MButton type="success" round>成功按钮</MButton>
      <MButton type="warning" round>警告按钮</MButton>
      <MButton type="danger" round>危险按钮</MButton>
    </div>
    <div class="demo-row">
      <MButton size="large" round>大型按钮</MButton>
      <MButton size="medium" round>中型按钮</MButton>
      <MButton size="small" round>小型按钮</MButton>
    </div>
  </div>
</template>

<script setup>
import { MButton } from 'moonwind-ui'
</script>

<style scoped>
.button-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

圆形按钮

通过 circle 属性来设置圆形按钮。

<template>
  <div class="button-demo">
    <div class="demo-row">
      <MButton circle>+</MButton>
      <MButton type="primary" circle>✓</MButton>
      <MButton type="success" circle>✓</MButton>
      <MButton type="warning" circle>!</MButton>
      <MButton type="danger" circle></MButton>
    </div>
    <div class="demo-row">
      <MButton size="large" circle>L</MButton>
      <MButton size="medium" circle>M</MButton>
      <MButton size="small" circle>S</MButton>
    </div>
    <div class="demo-row">
      <MButton type="primary" circle disabled>D</MButton>
      <MButton type="success" circle loading></MButton>
      <MButton circle>📝</MButton>
      <MButton type="danger" circle>🗑</MButton>
    </div>
  </div>
</template>

<script setup>
import { MButton } from 'moonwind-ui'
</script>

<style scoped>
.button-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>

API

Props

属性名	说明	类型	可选值	默认值
type	类型	string	default / primary / success / warning / danger	default
size	尺寸	string	large / default / small	default
disabled	是否禁用	boolean		false
loading	是否加载中状态	boolean		false
round	是否圆角按钮	boolean		false
circle	是否圆形按钮	boolean		false

Events

事件名	说明	回调参数
click	点击按钮时触发	(event: MouseEvent)

Slots

插槽名	说明
default	按钮内容