# floatball-example

**Repository Path**: lcssl/floatball-example

## Basic Information

- **Project Name**: floatball-example
- **Description**: uniapp-movable 可拖动悬浮球
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-11
- **Last Updated**: 2022-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app

## README

## Attributes

------
|   参数	           |  说明        |  类型       |  可选值    | 默认值|
| ----             |    ----    |    ----    |   ----    | ---- |
|  value / v-model |    悬浮球位置 |    Object  | — | — |
| zIndex |    叠加顺序    |    String/Number    | — | 999 |
| debounce |    防抖时长    |    Number    | — | 128 |
## 组件引用

------
### App.vue
```vue
<script>
export default {
  globalData: {
    //定义全局变量以供各个页面使用
    globalFloatBallPosition: {x: 360, y: 256},
  },
}
</script>
```
### 需引用页面
```vue
<template>
  <view class="workbench-wrap">
    <!-- floatBallPosition已在插件的mixin文件中定义 -->
    <css-float-ball v-model="floatBallPosition">
      <!-- <ball/> 为自己实现的球本体。如示例内的<ball/>组件 -->
      <!-- <ball/> -->
      <view class="float-ball-icon" hover-class="default-icon-hover" @click="()=>{}">
        <icon type="success" :size="48"/>
      </view>
    </css-float-ball>
    <view class="workbench-main-wrap">
    </view>
  </view>
</template>

<script>
// pages.json 中 easycom 为自动读取uni_modules内插件时，可省略
// import CssFloatBall from  '@/uni_modules/css-float-ball/components/css-float-ball/css-float-ball'
// import Ball from  '@/components/ball/ball'
import FloatBallMixin from '../../uni_modules/css-float-ball/components/css-float-ball/mixin'

export default {
  name: 'WorkBench',
  // pages.json 中 easycom 为自动读取uni_modules内插件时，可省略
  // components:{
  //   CssFloatBall,
  //   Ball,
  // },
  mixins:[FloatBallMixin],
}
</script>
<style lang="scss" scoped>
@import "index";
.float-ball-icon {
  background-color: #FFF;
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  @extend .defaultFlex;
  -webkit-box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47);
  -moz-box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47);
  box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47);
}
</style>
```
## PS:
在安卓、微信小程序流畅度还可以，其他平台暂未测试

pages.json 中 easycom 为自动读取uni_modules内插件时，可省略引入组件

防抖可以用lodash的debounce

欢迎斧正