npm package npm downloads github
npm package npm downloads github

Button of vue.


$ yarn add @_nu/vue-button @_nu/css-button


  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]

    /** 自定义样式 */

The purpose of setting the default "color" and "variation" is to avoid the need to add attributes every time the button is used.



    import Button from "@components/Button";
    export default {
        components: {


<Button href="." title="hello">hello</Button>
<button class="nu_button" type="button" ><span>hello</span></button>
<a class="nu_button" href="." title="hello"><span>hello</span></a>


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

custom style ?

Go to @_nu/css-button

Last Updated: 5/16/2020, 3:33:45 PM