#@91boy

### How to Install?

```bash
npm i @91boy/beautyui --save
```

### How to Use?

```bash
# main.js 全局安装
import beautyui from "@91boy/beautyui";
import "@91boy/beautyui/dist/css/beautyui.min.css";
Vue.use(beautyui);
```

### How much Components?

```bash
# 组件列表
<boy91drag-button>  #悬浮按钮组件
<boy91-swiper>  #万能轮播组件，基于swiper5封装
```
---
# <font color="#06c"  face=“黑体”>boy91drag-button 用法</font> 
- ### Props

| 参数名 | 类型 | 默认值 | 说明 |必填|
| ------ | ------| ---- | ---- |---|
|width|Number|40|悬浮球宽度||
|height|Number|40|悬浮球高度||
|distanceRight|Number|0|距离最右侧的临界值||
|distanceBottom|Number|100|距离底部的临界值||
|isScrollHidden|Bollean|false|页面滚动时是否隐藏悬浮球||
|isCanDraggable|Bollean|false|是否可以拖拽||
|zIndex|Number|50|悬浮球的层级||
|height|Number|40|悬浮球高度|
- ### Events

| 事件名  | 说明 |
| ------------ | --------|
|@handlepaly|点击悬浮球时触发,拖拽时不触发此事件|
- ### Slots

| 名称  | 说明 |
| ------------ | --------|
|content|自定义悬浮球显示的内容|
### 用法示例

```bash
# 简单实例
<template>
    <boy91DragButton></boy91DragButton>
</template>
```
---
# <font color="#06c"  face=“黑体”>boy91-swiper 用法</font> 
- ### Props

| 参数名 | 类型 | 默认值 | 说明 ||
| ------------ | --------| ------ | ------ |---|
|containerClass|String|""|swiper对象类名|必填|
|options|Object|{}|配置swiper|必填[参考](https://www.swiper.com.cn/api/index.html)|

### 用法示例

```bash
# 简单实例
<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>
```