# Button 按钮

按钮组件，可配置多种不同的按钮样式

## 按钮类型

配置`type`属性改变按钮类型

::: snippet 支持`default`、`primary`、`secondary`, `link`，默认为`default`

```html
<template>
  <div>
    <zui-button disabled>Default</zui-button>
    <zui-button type="primary">Primary</zui-button>
    <zui-button type="secondary">Secondary</zui-button>
    <zui-button type="link">链接</zui-button>
  </div>
</template>
```

:::

## 按钮形状

支持默认、圆角、矩形按钮

::: snippet 配置`round`为圆角按钮、配置`square`为矩形按钮

```html
<template>
  <div>
    <zui-button>默认按钮</zui-button>
    <zui-button round>圆角按钮</zui-button>
    <zui-button square>矩形按钮</zui-button>
  </div>
</template>
```

:::

## 按钮大小

配置`size`属性改变按钮大小

::: snippet 支持`sm`、`md`、`lg`，默认为`md`

```html
<template>
  <div>
    <zui-button size="sm">小型按钮</zui-button>
    <zui-button size="md" type="secondary">中型按钮</zui-button>
    <zui-button size="lg" type="primary">大型按钮</zui-button>
  </div>
</template>
```

:::


## 块级元素

宽度占满一行的按钮

::: snippet 配置`block`

```html
<template>
  <div>
    <zui-button type="primary" size="lg" square block>确定</zui-button>
    <zui-button size="lg" square block>取消</zui-button>
  </div>
</template>
```

:::

## 按钮禁用

按钮支持禁用

::: snippet 配置`disabled`

```html
<template>
  <div>
    <zui-button type="primary" @click="handleClick">普通按钮</zui-button>
    <zui-button disabled @click="handleClick">禁用按钮</zui-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('click');
    }
  } 
}
</script>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
type | 按钮类型 | String | default、primary、secondary | default
block | 块状按钮 | Boolean | true、false | false
round | 圆角按钮 | Boolean | true、false | false
square | 矩形按钮 | Boolean | true、false | false
disabled | 按钮禁用 | Boolean | true、false | false

## Events 事件

事件名称|说明|回调参数
-|-|-
click | 按钮点击事件 | -