Button 按钮

常用的操作按钮。

基础用法

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

基础用法

Button组件的基础用法

<script setup lang="ts">
  import Button from '@/components/Button/Button.vue'
</script>
<template>
  <Button>Test Button</Button>
  <Button plain>Plain Button</Button>
  <Button round>Round Button</Button>
  <Button circle>PR</Button>
  <Button disabled>Disabled Button</Button><br/><br/>
  <Button type="primary">Primary</Button>
  <Button type="success">Success</Button>
  <Button type="info">Info</Button>
  <Button type="warning">Warning</Button>
  <Button type="danger">Danger</Button><br/><br/>
  <Button type="primary" plain>Primary</Button>
  <Button type="success" plain>Success</Button>
  <Button type="info" plain>Info</Button>
  <Button type="warning" plain>Warning</Button>
  <Button type="danger" plain>Danger</Button><br/><br/>
  <Button size="large">Large</Button>
  <Button size="small">Small</Button><br/><br/>
  <Button size="large" loading>Loading</Button>
  <Button size="large" icon="arrow-up">Icon</Button><br/><br/>   
</template>

原生类型

通过 native-type 指定原生 button 标签的 type，可用于表单提交与重置。

原生类型

Button native-type 用法

<script setup lang="ts">
import Button from '@/components/Button/Button.vue'

const handleSubmit = () => {
  console.log('submit')
}

const handleReset = () => {
  console.log('reset')
}
</script>

<template>
  <form @submit.prevent="handleSubmit" @reset.prevent="handleReset">
    <Button native-type="submit" type="primary">提交</Button>
    <Button native-type="reset" plain>重置</Button>
    <Button native-type="button" type="info">普通按钮</Button>
  </form>
</template>

API

Button Attributes

参数	说明	类型	默认值
size	按钮尺寸	'large' | 'small'	-
type	按钮类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	-
plain	是否朴素按钮	boolean	false
round	是否圆角按钮	boolean	false
circle	是否圆形按钮	boolean	false
loading	是否加载中	boolean	false
disabled	是否禁用	boolean	false
icon	图标名称	string	-
autofocus	是否自动聚焦	boolean	false
native-type	原生 type 属性	'button' | 'submit' | 'reset'	button

Button Exposes

方法名	说明	类型
ref	原生按钮节点	HTMLButtonElement