@_nu/vue-button 中文文档教程
Button
组件库母版系统 NU-system 按钮组件 VUE 实现。
怎么用?
$ yarn add @_nu/vue-button @_nu/css-button
二次封装
```vue
设置默认「 颜色 」和「 变体 」的目的是避免每次在使用按钮的时候需要添加对应属性。
因为 `NuButton` 是纯逻辑组件本身不会输出任何样式，在实际项目中使用需要二次封装。
这里采用的是 [nu-button](https://nu-system.github.io/css/button/) 里面的 bootstrap 皮肤。
### 使用
vue
## DOM 结构
VUE
上面的代码会被渲染成如下的 HTML 结构。
HTML hello ```
API
| props | 类型 | 默认值 | 功能 | DEMO |
|---|---|---|---|---|
| baseClass | string | 'nu_btn' | 默认选择器 | - |
| type | string | 'button' | 按钮类型 | |
| href | string | - | 跳转链接 | |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 按钮颜色 | |
| primary | boolean | - | 主按钮 | |
| secondary | boolean | - | 次级按钮 | |
| warning | boolean | - | 警告按钮 | |
| success | boolean | - | 成功按钮 | |
| danger | boolean | - | 危险按钮 | |
| variant | 'fill' | 'ghost' | 'link' | 'fill' | 按钮变体 | |
| fill | boolean | - | 实心按钮 | |
| ghost | boolean | - | 幽灵按钮 | |
| link | boolean | - | 链接按钮 | |
| large | boolean | - | 大按钮 | |
| middle | boolean | - | 中号按钮 | |
| small | boolean | - | 小按钮 | |
| disabled | boolean | - | 不可用按钮 | |
| loading | boolean | - | loading按钮 | |
| capsule | boolean | - | 圆角按钮 | |
| block | boolean | - | 占一行的按钮 | 见下面demo |
并且除了上表中的属性，其它属性都会直接传到原生 button 上。
如何修改样式？
nu-button-vue 会将上所有的 boolean 属性，基于以下的 「 class 映射表 」添加对应的 class 到按钮上。想要自定义样式，只需要围绕对应选择器进行开发即可, 样式定义规则可以查看 nu-button。
| props | class |
|---|---|
| baseClass | .nu_btn |
| primary | ._primary |
| secondary | ._secondary |
| warning | ._warning |
| success | ._success |
| danger | ._danger |
| fill | ._fill |
| ghost | ._ghost |
| link | ._link |
| disabled | ._disabled |
| loading | ._loading |
| large | ._large |
| middle | ._middle |
| small | ._small |
| capsule | ._capsule |
| block | ._block |
