Button 按钮

常用的操作按钮。

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

<template>
  <el-row class="mb-4">
    <m-button font="star_arc_line" :plain="false" type="primary">Primary</m-button>
    <m-button font="star_arc_line" :plain="false" type="success">Success</m-button>
    <m-button font="star_arc_line" :plain="false" type="info">Info</m-button>
    <m-button font="star_arc_line" :plain="false" type="warning">Warning</m-button>
    <m-button font="star_arc_line" :plain="false" type="danger">Danger</m-button>
  </el-row>

  <el-row class="mb-4">
    <m-button font="star_arc_line" type="primary">Primary</m-button>
    <m-button font="star_arc_line" type="success">Success</m-button>
    <m-button font="star_arc_line" type="info">Info</m-button>
    <m-button font="star_arc_line" type="warning">Warning</m-button>
    <m-button font="star_arc_line" type="danger">Danger</m-button>
  </el-row>

  <el-row class="mb-4">
    <m-button font="star_arc_line" round type="primary">Primary</m-button>
    <m-button font="star_arc_line" round type="success">Success</m-button>
    <m-button font="star_arc_line" round type="info">Info</m-button>
    <m-button font="star_arc_line" round type="warning">Warning</m-button>
    <m-button font="star_arc_line" round type="danger">Danger</m-button>
  </el-row>

  <el-row class="mb-4">
    <m-button font="star_arc_line" round type="primary" />
    <m-button font="star_arc_line" round type="success" />
    <m-button font="star_arc_line" round type="info" />
    <m-button font="star_arc_line" round type="warning" />
    <m-button font="star_arc_line" round type="danger" />
  </el-row>

  <el-row>
    <m-button font="star_arc_line" circle type="primary" />
    <m-button font="star_arc_line" circle type="success" />
    <m-button font="star_arc_line" circle type="info" />
    <m-button font="star_arc_line" circle type="warning" />
    <m-button font="star_arc_line" circle type="danger" />
  </el-row>
</template>

<script lang="ts" setup></script>

<style>
.mb-4 {
  margin-bottom: 1rem;
}
</style>

显示代码

禁用状态

使用 disabled 来定义按钮的禁用。

<template>
  <el-row class="mb-4">
    <m-button font="star_arc_line" disabled :plain="false" type="primary">Primary</m-button>
    <m-button font="star_arc_line" disabled :plain="false" type="success">Success</m-button>
    <m-button font="star_arc_line" disabled :plain="false" type="info">Info</m-button>
    <m-button font="star_arc_line" disabled :plain="false" type="warning">Warning</m-button>
    <m-button font="star_arc_line" disabled :plain="false" type="danger">Danger</m-button>
  </el-row>

  <el-row class="mb-4">
    <m-button font="star_arc_line" disabled type="primary">Primary</m-button>
    <m-button font="star_arc_line" disabled type="success">Success</m-button>
    <m-button font="star_arc_line" disabled type="info">Info</m-button>
    <m-button font="star_arc_line" disabled type="warning">Warning</m-button>
    <m-button font="star_arc_line" disabled type="danger">Danger</m-button>
  </el-row>

  <el-row class="mb-4">
    <m-button font="star_arc_line" disabled round type="primary">Primary</m-button>
    <m-button font="star_arc_line" disabled round type="success">Success</m-button>
    <m-button font="star_arc_line" disabled round type="info">Info</m-button>
    <m-button font="star_arc_line" disabled round type="warning">Warning</m-button>
    <m-button font="star_arc_line" disabled round type="danger">Danger</m-button>
  </el-row>

  <el-row>
    <m-button font="star_arc_line" disabled round type="primary" />
    <m-button font="star_arc_line" disabled round type="success" />
    <m-button font="star_arc_line" disabled round type="info" />
    <m-button font="star_arc_line" disabled round type="warning" />
    <m-button font="star_arc_line" disabled round type="danger" />
  </el-row>
</template>

<script lang="ts" setup></script>

<style>
.mb-4 {
  margin-bottom: 1rem;
}
</style>

显示代码

链接按钮

WARNING

type="text" 已被 废弃，请考虑切换至新的 API link 。

<template>
  <el-row class="mb-4">
    <m-button font="star_arc_line" link :plain="false" type="primary">Primary</m-button>
    <m-button font="star_arc_line" link :plain="false" type="success">Success</m-button>
    <m-button font="star_arc_line" link :plain="false" type="info">Info</m-button>
    <m-button font="star_arc_line" link :plain="false" type="warning">Warning</m-button>
    <m-button font="star_arc_line" link :plain="false" type="danger">Danger</m-button>
  </el-row>

  <el-row class="mb-4">
    <m-button font="star_arc_line" link disabled type="primary">Primary</m-button>
    <m-button font="star_arc_line" link disabled type="success">Success</m-button>
    <m-button font="star_arc_line" link disabled type="info">Info</m-button>
    <m-button font="star_arc_line" link disabled type="warning">Warning</m-button>
    <m-button font="star_arc_line" link disabled type="danger">Danger</m-button>
  </el-row>
</template>

<script lang="ts" setup></script>

<style>
.mb-4 {
  margin-bottom: 1rem;
}
</style>

显示代码

内置样式

内置样式只需使用 is 即可完成样式选择

<template>
  <el-row class="mb-4">
    <m-button is="add">Add</m-button>
    <m-button is="cancel">Cancel</m-button>
    <m-button is="check">Check</m-button>
    <m-button is="download">Download</m-button>
    <m-button is="edit">Edit</m-button>
  </el-row>
  <el-row class="mb-4">
    <m-button is="export">Export</m-button>
    <m-button is="file">File</m-button>
    <m-button is="go">Go</m-button>
    <m-button is="import">Import</m-button>
    <m-button is="ok">Ok</m-button>
  </el-row>
  <el-row class="mb-4">
    <m-button is="refresh">Refresh</m-button>
    <m-button is="remove">Remove</m-button>
    <m-button is="save">Save</m-button>
    <m-button is="search">Search</m-button>
    <m-button is="submit">Submit</m-button>
  </el-row>
  <el-row class="mb-4">
    <m-button is="switch">Switch</m-button>
    <m-button is="sync">Sync</m-button>
    <m-button is="time">Time</m-button>
    <m-button is="trash">Trash</m-button>
    <m-button is="upload">Upload</m-button>
  </el-row>
  <el-row>
    <m-button is="view">View</m-button>
  </el-row>
</template>

<script lang="ts" setup></script>

<style>
.mb-4 {
  margin-bottom: 1rem;
}
</style>

显示代码

防抖按钮

使用 debounced 即可开启防抖模式

<template>
  <el-row>
    <m-button font="star_arc_line" @click="debouncedClick">非防抖按钮</m-button>
    <m-button font="star_arc_line" debounced @click="debouncedClick">防抖按钮</m-button>
  </el-row>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";

function debouncedClick() {
  ElMessage.success("点击触发");
}
</script>

<style></style>

显示代码

Icon位置

使用 position 即可开启防抖模式

<template>
  <el-row>
    <m-button font="star_arc_line" @click="debouncedClick">左侧</m-button>
    <m-button font="star_arc_line" position="right" @click="debouncedClick">右侧</m-button>
  </el-row>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";

function debouncedClick() {
  ElMessage.success("点击触发");
}
</script>

<style></style>

显示代码

Api

Attribute 属性

属性名	类型	可选值	默认值	说明
is	string	样式展示	—	内置样式选择
type	string	default / primary / success / warning / danger / info / text	default	类型
position	string	'left' / 'right'	left	Icon位置
font	string	—	--	icon 图标(m-icon)
loading	boolean	—	false	是否 Loading 状态
loadingBy	string	—	--	自动 Loading 监听依赖源
plain	boolean	—	true	是否为朴素按钮
round	boolean	—	false	是否为圆角按钮
circle	boolean	—	false	是否为圆形按钮
debounced	boolean	—	false	开启防抖
debouncedTime	number	—	800	防抖延迟时间