@_nu/vue-button 中文文档教程

发布于 5年前 浏览 20 项目主页 更新于 3年前

Button

npm packagegithub

组件库母版系统 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
baseClassstring'nu_btn'默认选择器-
typestring'button'按钮类型
hrefstring-跳转链接
color'default' | 'primary' | 'secondary' |
'success' | 'warning' | 'danger'
'default'按钮颜色
primaryboolean-主按钮
secondaryboolean-次级按钮
warningboolean-警告按钮
successboolean-成功按钮
dangerboolean-危险按钮
variant'fill' | 'ghost' | 'link''fill'按钮变体
fillboolean-实心按钮
ghostboolean-幽灵按钮
linkboolean-链接按钮
largeboolean-大按钮
middleboolean-中号按钮
smallboolean-小按钮
disabledboolean-不可用按钮
loadingboolean-loading按钮
capsuleboolean-圆角按钮
blockboolean-占一行的按钮见下面demo

并且除了上表中的属性,其它属性都会直接传到原生 button 上。

如何修改样式?

nu-button-vue 会将上所有的 boolean 属性,基于以下的 「 class 映射表 」添加对应的 class 到按钮上。想要自定义样式,只需要围绕对应选择器进行开发即可, 样式定义规则可以查看 nu-button

propsclass
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
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文