@_nu/vue-button
v0.0.3
Published
NU 「 no-ui 」 组件库系统 nu-system,按钮组件 VUE 实现
Downloads
17
Readme
Button
组件库母版系统 NU-system 按钮组件 VUE 实现。
怎么用?
$ yarn add @_nu/vue-button @_nu/css-button
二次封装
<script>
import NuButton from "@_nu/vue-button";
import "@_nu/css-button";
import "@_nu/css-button/css/skins/loading.css";
import "@_nu/css-button/css/skins/bootstrap.css";
export default {
props: {
// 设置默认颜色
color: {
default: 'primary'
},
// 设置默认变体
variant: {
default: 'ghost'
},
},
mixins: [NuButton]
};
</script>
<style>
.nu_btn{
/** 自定义样式 */
}
</style>
设置默认「 颜色 」和「 变体 」的目的是避免每次在使用按钮的时候需要添加对应属性。
因为 NuButton
是纯逻辑组件本身不会输出任何样式,在实际项目中使用需要二次封装。
这里采用的是 nu-button 里面的 bootstrap 皮肤。
使用
<template>
<div>
<Button>按钮</Button>
</div>
</template>
<script>
import Button from "@components/Button";
export default {
components: {
Button
}
}
</script>
DOM 结构
<Button>hello</Button>
<Button href="." title="hello">hello</Button>
上面的代码会被渲染成如下的 HTML 结构。
<button class="nu_button" type="button" ><span>hello</span></button>
<a class="nu_button" href="." title="hello"><span>hello</span></a>
API
| props | 类型 | 默认值 | 功能 | DEMO | |:-----|:-----:|:-----:|:-----:|:-----:| | baseClass | string | 'nu_btn' | 默认选择器 | - | | type | string | 'button' | 按钮类型 | Submit | | 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 |