Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nu-system/vue-button

NU 「 no-ui 」组件库系统 nu-system，按钮组件 VUE 实现
https://github.com/nu-system/vue-button

button button-vue ui-components vue-button vue-components

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/nu-system/vue-button
Owner: nu-system
Created: 2019-06-25T04:45:47.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2019-08-20T09:16:52.000Z (over 5 years ago)
Last Synced: 2024-11-07T12:48:22.735Z (about 2 months ago)
Topics: button, button-vue, ui-components, vue-button, vue-components
Language: Vue
Homepage: https://nu-system.github.io/vue/button/
Size: 11.7 KB
Stars: 0
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        # Button

[![npm package](https://img.shields.io/npm/v/@_nu/vue-button.svg)](https://www.npmjs.org/package/@_nu/vue-button)

[![github](https://img.shields.io/github/stars/nu-system/vue-button.svg?style=social)](https://github.com/nu-system/vue-button)

组件库母版系统 [NU-system](https://nu-system.github.io/) 按钮组件 VUE 实现。

## 怎么用?

```bash

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

```

### 二次封装

```vue  

  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]

  };

  .nu_btn{

    /** 自定义样式 */

  }

```

设置默认「 颜色 」和「 变体 」的目的是避免每次在使用按钮的时候需要添加对应属性。

因为 `NuButton` 是纯逻辑组件本身不会输出任何样式，在实际项目中使用需要二次封装。

这里采用的是 [nu-button](https://nu-system.github.io/css/button/) 里面的 bootstrap 皮肤。

### 使用

```vue  

    


      按钮

    
  

    import Button from "@components/Button";

    export default {

        components: {

            Button

        }

    }

```

## DOM 结构

```VUE

hello

hello

```

上面的代码会被渲染成如下的 HTML 结构。

```HTML

hello

hello

```

## 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](https://yued-fe.github.io/nu-system/packages/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 |