/vue-button

NU 「 no-ui 」 组件库系统 nu-system,按钮组件 VUE 实现

Primary LanguageVue

Button

npm package github

组件库母版系统 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
block 按钮

并且除了上表中的属性,其它属性都会直接传到原生 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