1.1.0 • Published 3 years ago
#@91boy
How to Install?
npm i @91boy/beautyui --save
How to Use?
# main.js 全局安装
import beautyui from "@91boy/beautyui";
import "@91boy/beautyui/dist/css/beautyui.min.css";
Vue.use(beautyui);
How much Components?
# 组件列表
<boy91drag-button> #悬浮按钮组件
<boy91-swiper> #万能轮播组件，基于swiper5封装
boy91drag-button 用法
| 参数名 | 类型 | 默认值 | 说明 | 必填 |
|---|
| width | Number | 40 | 悬浮球宽度 | |
| height | Number | 40 | 悬浮球高度 | |
| distanceRight | Number | 0 | 距离最右侧的临界值 | |
| distanceBottom | Number | 100 | 距离底部的临界值 | |
| isScrollHidden | Bollean | false | 页面滚动时是否隐藏悬浮球 | |
| isCanDraggable | Bollean | false | 是否可以拖拽 | |
| zIndex | Number | 50 | 悬浮球的层级 | |
| height | Number | 40 | 悬浮球高度 |
| 事件名 | 说明 |
|---|
| @handlepaly | 点击悬浮球时触发,拖拽时不触发此事件 |
用法示例
# 简单实例
<template>
<boy91DragButton></boy91DragButton>
</template>
boy91-swiper 用法
| 参数名 | 类型 | 默认值 | 说明 | |
|---|
| containerClass | String | "" | swiper对象类名 | 必填 |
| options | Object | {} | 配置swiper | 必填参考 |
用法示例
# 简单实例
<template>
<boy91Swiper containerClass="fdimg-swiper" :options="options">
<div slot="wrapper" class="swiper-wrapper">
<div class="swiper-slide" style="background:#f00">Slide 1</div>
<div class="swiper-slide" style="background:#06c">Slide 2</div>
<div class="swiper-slide" style="background:#0f0">Slide 3</div>
</div>
</boy91Swiper>
</template>
data() {
return {
options: {
effect: "coverflow",
slidesPerView: 3,
centeredSlides: true
}
};
}
<style lang="less" scoped>
.fdimg-swiper {
height: 300px;
}
</style>