0.0.3 • Published 1 year ago
ab-ui-float v0.0.3
AbUI库中的浮窗动画AbUIFloat组件
使用指南
- 下载ab-ui-float
npm i ab-ui-float- 在 src\main.js 中引入下载的包，并引入其样式 import "../node_modules/ab-ui-float/style.css";
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import "../node_modules/ab-ui-float/style.css"; //引入组件样式
import AbUIFloat from "ab-ui-float"; //引入下载后的组件
const app = createApp(App);
app.use(AbUIFloat); //注册
app.mount("#app");Float浮窗动画
效果
position(浮窗动画的方位)
left-top
left-bottom
right-top
right-bottom
top-left(为了看效果，设置了浮窗盒子的宽高)
top-right(为了看效果，设置了浮窗盒子的宽高)
bottom-left(为了看效果，设置了浮窗盒子的宽高)
bottom-right(为了看效果，设置了浮窗盒子的宽高)
Usage
- 使用 AbFloat 组件
<AbFloat position="left-bottom" BtnText="浮窗按钮" bgcolor="blue" Btnisround Btnisplain>浮窗动画内容</AbFloat>API
| 参数 | 说明 | 参数/备注 |
|---|---|---|
| position | 定义浮窗动画的方位，前一个值是从哪个方向浮出，第二个值则为靠近的边，使用-连接。必传 | 可选值为top-left, top-right,bottom-left,bottom-right,right-top,right-bottom,left-top, left-bottom |
| Floatwidth | 浮窗动画盒子的宽度 | |
| Floatheight | 浮窗动画盒子的高度 | |
| Floatbgcolor | 浮窗动画盒子的背景颜色 | |
| 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 |