# Button 按钮

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

## 按钮类型

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

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

```html
<template>
  <div>
    <zui-button>Default</zui-button>
    <zui-button type="primary">Primary</zui-button>
    <zui-button type="secondary">Secondary</zui-button>
    <zui-button type="plain">Plain</zui-button>
    <zui-button type="link">Link</zui-button>
  </div>
</template>
```

:::

## 按钮主题

配置`theme`属性改变按钮主题

::: snippet 支持`red`、`green`、`blue`

```html
<template>
  <div>
    <div style="padding-top: 10px;">
      <zui-button>Default</zui-button>
      <zui-button type="primary">Primary</zui-button>
      <zui-button type="secondary">Secondary</zui-button>
      <zui-button type="plain">Plain</zui-button>
      <zui-button type="ghost">Ghost</zui-button>
      <zui-button type="link">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button theme="red">Default</zui-button>
      <zui-button type="primary" theme="red">Primary</zui-button>
      <zui-button type="secondary" theme="red">Secondary</zui-button>
      <zui-button type="plain" theme="red">Plain</zui-button>
      <zui-button type="ghost" theme="red">Ghost</zui-button>
      <zui-button type="link" theme="red">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button theme="green">Default</zui-button>
      <zui-button type="primary" theme="green">Primary</zui-button>
      <zui-button type="secondary" theme="green">Secondary</zui-button>
      <zui-button type="plain" theme="green">Plain</zui-button>
      <zui-button type="ghost" theme="green">Ghost</zui-button>
      <zui-button type="link" theme="green">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button theme="blue">Default</zui-button>
      <zui-button type="primary" theme="blue">Primary</zui-button>
      <zui-button type="secondary" theme="blue">Secondary</zui-button>
      <zui-button type="plain" theme="blue">Plain</zui-button>
      <zui-button type="ghost" theme="blue">Ghost</zui-button>
      <zui-button type="link" theme="blue">Link</zui-button>
    </div>
  </div>
</template>
```

:::

## 按钮颜色

配置`color`属性改变按钮颜色

::: snippet 支持任意颜色

```html
<template>
  <div>
    <div style="padding-top: 10px;">
      <zui-button color="#074137">Default</zui-button>
      <zui-button type="primary" color="#074137">Primary</zui-button>
      <zui-button type="secondary" color="#074137">Secondary</zui-button>
      <zui-button type="plain" color="#074137">Plain</zui-button>
      <zui-button type="ghost" color="#074137">Ghost</zui-button>
      <zui-button type="link" color="#074137">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#FDD108">Default</zui-button>
      <zui-button type="primary" color="#FDD108">Primary</zui-button>
      <zui-button type="secondary" color="#FDD108">Secondary</zui-button>
      <zui-button type="plain" color="#FDD108">Plain</zui-button>
      <zui-button type="ghost" color="#FDD108">Ghost</zui-button>
      <zui-button type="link" color="#FDD108">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#F39800">Default</zui-button>
      <zui-button type="primary" color="#F39800">Primary</zui-button>
      <zui-button type="secondary" color="#F39800">Secondary</zui-button>
      <zui-button type="plain" color="#F39800">Plain</zui-button>
      <zui-button type="ghost" color="#F39800">Ghost</zui-button>
      <zui-button type="link" color="#F39800">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#FF5257">Default</zui-button>
      <zui-button type="primary" color="#FF5257">Primary</zui-button>
      <zui-button type="secondary" color="#FF5257">Secondary</zui-button>
      <zui-button type="plain" color="#FF5257">Plain</zui-button>
      <zui-button type="ghost" color="#FF5257">Ghost</zui-button>
      <zui-button type="link" color="#FF5257">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="rgb(40, 170, 145)">Default</zui-button>
      <zui-button type="primary" color="rgb(40, 170, 145)">Primary</zui-button>
      <zui-button type="secondary" color="rgb(40, 170, 145)">Secondary</zui-button>
      <zui-button type="plain" color="rgb(40, 170, 145)">Plain</zui-button>
      <zui-button type="ghost" color="rgb(40, 170, 145)">Ghost</zui-button>
      <zui-button type="link" color="rgb(40, 170, 145)">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#2F86F6">Default</zui-button>
      <zui-button type="primary" color="#2F86F6">Primary</zui-button>
      <zui-button type="secondary" color="#2F86F6">Secondary</zui-button>
      <zui-button type="plain" color="#2F86F6">Plain</zui-button>
      <zui-button type="ghost" color="#2F86F6">Ghost</zui-button>
      <zui-button type="link" color="#2F86F6">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#000">Default</zui-button>
      <zui-button type="primary" color="#000">Primary</zui-button>
      <zui-button type="secondary" color="#000">Secondary</zui-button>
      <zui-button type="plain" color="#000">Plain</zui-button>
      <zui-button type="ghost" color="#000">Ghost</zui-button>
      <zui-button type="link" color="#000">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变</zui-button>
      <zui-button color="linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)" round>渐变</zui-button>
      <zui-button color="linear-gradient(to bottom right, #FDD108, #FFA000)" font-color="#333">渐变</zui-button>
      <zui-button color="linear-gradient(to bottom right, #F39800, #FF6400)">渐变</zui-button>
      <zui-button color="linear-gradient(to bottom right, #14C3A5, #117361)">渐变</zui-button>
    </div>
  </div>
</template>
```

:::

## 按钮图标

支持自定义图标

::: snippet 配置`icon`改变图标，支持`String`、`Object`类型

```html
<template>
  <div>
    <zui-button icon="accountbalancewallet">Default</zui-button>
    <zui-button :icon="{ name: 'tongzhi', svg: true }">Default</zui-button>
    <zui-button icon="accountbalancewallet" type="primary">Primary</zui-button>
    <zui-button :icon="{ src: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_2@1x-50e9c7fdf4.png' }" type="primary">Primary</zui-button>
  </div>
</template>
```

:::

## 按钮形状

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

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

```html
<template>
  <div>
    <zui-button>默认按钮</zui-button>
    <zui-button round>圆角按钮</zui-button>
    <zui-button square>矩形按钮</zui-button>
    <zui-button circle>圆</zui-button>
    <zui-button circle icon="search" color="linear-gradient(to right, #4bb0ff, #6149f6)"></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 @click="toggleDisabled">切换禁用状态</zui-button>
    <zui-button :disabled="disabled" type="primary" @click="handleClick">按钮</zui-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled: true
    }
  },
  methods: {
    toggleDisabled() {
      this.disabled = !this.disabled;
    },
    handleClick() {
      console.log('click');
    }
  } 
}
</script>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
type | 按钮类型 | String | default,primary,secondary | default
size | 按钮大小 | String | ms,md,lg | md
block | 块状按钮 | Boolean | true,false | false
round | 圆角按钮 | Boolean | true,false | false
square | 矩形按钮 | Boolean | true,false | false
disabled | 按钮禁用 | Boolean | true,false | false
theme | 按钮主题 | String | red,green,blue | -
color | 按钮颜色 | String | - | -
fontColor | 按钮文本颜色，只在color为linear-gradient模式下生效 | String | - | #FFF

## Events 事件

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