Ab-ui-btn NPM | npm.io

AbUI库中的按钮AbUIBtn组件

使用指南

下载 ab-ui-btn

npm i ab-ui-btn

在 src\main.js 中引入下载的包，并引入其样式 import "../node_modules/ab-ui-btn/style.css";

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import "../node_modules/ab-ui-btn/style.css"; //引入组件样式
import AbUIBtn from "ab-ui-btn"; //引入下载后的组件

const app = createApp(App);
app.use(AbUIBtn); //注册
app.mount("#app");

AbButton按钮

效果图

按钮类型(Btntype)

alt text

按钮大小(Btnsize)

alt text

自定义按钮宽高(Btnwidth,Btnheight)

alt text

朴素模式(Btnisplain)

alt text

圆角按钮(Btnisround)

alt text

圆角 + 朴素模式

alt text

Usage

使用 AbButton 组件

<AbButton Btntype="success">Ab-ui按钮</AbButton>

API

参数	说明	参数
Btntype	定义按钮的类型,默认不填为`default`	可选值为`danger`, `warning`,`success`,`primary`,`default`
Btnsize	定义按钮的大小,默认宽度 100%	可选值为`large`,`middle`,`small`,`mini`
Btnwidth	定义按钮的宽度,默认为`mini`按钮的宽度	级别>Btnsize
Btnheight	定义按钮的高度,默认为`mini`按钮的高度	级别>Btnsize
Btnbgcolor	定义按钮的背景颜色，默认粉色背景	级别>Btntype
Btncolor	定义按钮字体颜色，默认白色字体	级别>Btntype
Btnisplain	定义按钮是否采用朴素样式，默认不使用	可选值为 true(子组件可省略不写)，false
Btnisround	定义按钮是否采用圆角，默认不使用	可选值为 true(子组件可省略不写)，false