# Button 按钮
按钮用于开始一个即时操作。

## 何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

### 按钮类型
按钮有四种类型：默认类型, `primary`, `danger`, `text`。`primary`在同一个操作区域最多出现一次。

@[demo](./demo/basic.vue)


### 加载中状态
添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

@[demo](./demo/loading.vue)


### 不可用状态
添加`disabled`属性即可让按钮处于不可用状态，同时按钮样式也会改变。

@[demo](./demo/disabled.vue)


### 幽灵按钮
幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。

@[demo](./demo/ghost.vue)


### 图标按钮
通过`icon`字段设置图标， 通过`circle`字段设置圆形按钮

@[demo](./demo/icon.vue)


### 按钮组
以按钮组的方式出现，常用于多项类似操作。
使用`<button-group>`标签来嵌套你的按钮。

@[demo](./demo/group.vue)


### 按钮尺寸
按钮有大、 默认、中、小三种尺寸。
通过设置`size`为`large` `medium` `small`分别把按钮设为大、 中、小尺寸。若不设置`size`，则尺寸为 default。

@[demo](./demo/size.vue)


### block 按钮
`block`属性将使按钮适应其父宽度变化。

@[demo](./demo/block.vue)

### 链接按钮
`to` 和 `href` 分别对应的是 `<router-link :to="">` 和 `<a href="">` 大家按自己的需求来取舍使用 `to` 和 `href` 同时书写时 `<router-link>` 的特性将不再生效，使用的是 `<a>`的特性。

@[demo](./demo/link.vue)


## props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------ | ------- | ------- | ------------------- | -------- |
| size | 设置按钮大小 | string  | small/medium/large | - |
| type | 设置按钮类型 | string  | primary/danger/text | - |
| disabled | 是否禁用 | boolean | - | false |
| loading | 是否加载中状态 | boolean | - | false |
| native-type | 原生`type`属性 | string  | button/submit/reset | button |
| circle | 是否圆形按钮 | boolean | - | false |
| ghost | 是否为幽灵按钮 | boolean | - | false |
| icon | 按钮内图标名称 | string | - | - |
| icon-type | 按钮内图标在文字的左边或者右边 | string | left/right | left |
| icon-size | 按钮字体大小 | string | - | 14px |
| block | 块级按钮，使按钮适应其父宽度变化 | boolean | - | false |
| to | 等同于 router-link 的 to | String, Object | - | '' |
| href | 等同于 &lt; a> 标签的 href | String, Object | - | '' |
| $attrs | 在 `to 或 href` 任一一项生效时，链接标签会继承其 attr 属性 | String | - | '' |