AbUI库中的按钮AbUIBtn组件

使用指南

1. 下载 ab-ui-btn

npm i ab-ui-btn

2. 在 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)

按钮大小(Btnsize)

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

朴素模式(Btnisplain)

圆角按钮(Btnisround)

圆角 + 朴素模式

Usage

1. 使用 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 |