wardrobe/uni_modules/css-float-ball/components/css-float-ball/css-float-ball.vue

<template>
  <view class="float-ball-wrap" :style="{zIndex}">
    <movable-area class="float-ball-movable-area">
      <!--悬浮球主体-->
      <movable-view :x="value.x" :y="value.y" class="float-ball" direction="all" inertia :animation="false"
                    @change="drag" out-of-bounds>
        <!--悬浮球外部插槽-->
		<slot></slot>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
import {debounce} from './util'

export default {
  name: 'css-float-ball',
  props: {
    zIndex: {
      type: [String, Number],
      default: 999,
    },
    autoBox: {
      type: [Boolean],
      default: true,
    },
    value: {
      type: Object,
      required: true,
      default() {
        return {x: 360, y: 256}
      }
    },
    //防抖时长
    debounce:{
      type: Number,
      default:128,
    },
  },
  computed: {},
  data() {
    return {}
  },
  methods: {
    /**
     * 拖动时，更新globalData，也可以用vuex替代
     * @param e
     */
    drag(e) {
      const _this = this;
      debounce(function () {
        getApp().globalData.globalFloatBallPosition = e.detail;
      }, _this.debounce)
    },
  },
}
</script>
<style lang="scss" scoped>
@import "index";

.default-icon-hover {
  opacity: 0.6;
}
</style>