@91boy/beautyui 中文文档教程

Question

@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 用法

• ### 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	自定义悬浮球显示的内容

用法示例

# 简单实例
<template>
    <boy91DragButton></boy91DragButton>
</template>

---

boy91-swiper 用法

• ### Props

参数名	类型	默认值	说明
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>