Button
| npm package | npm downloads | github |
|---|---|---|
 |  |  |
Button of vue.
Install
$ yarn add @_nu/vue-button @_nu/css-button
Custom
<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>
The purpose of setting the default "color" and "variation" is to avoid the need to add attributes every time the button is used.
Use
<template>
<div>
<Button>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>
<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 |
custom style ？
Go to @_nu/css-button。