wardrobe/uni_modules/css-float-ball

Attributes

---

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

组件引用

---

App.vue

<script>
export default {
  globalData: {
    //定义全局变量以供各个页面使用
    globalFloatBallPosition: {x: 360, y: 256},
  },
}
</script>

需引用页面

<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

欢迎斧正