Button

npm package	npm downloads	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'	按钮类型
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

# Button

# 怎么用?

# 二次封装

# 使用

# DOM 结构

# API

# 如何修改样式？

Button

怎么用?

二次封装

使用

DOM 结构

API

如何修改样式？