悬浮挂件加吸顶效果

<template>
  
    <div ref="el" class="customer_class" :style="style"  >
      <team-outlined style="font-size: 24px" />悬浮球
    </div>
  
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import { useDraggable } from '@vueuse/core';
 
 
const mouseup = (p) => {
  //返回的参数是坐标
  p.x = movetoside(p.x);
};
 
const movetoside = (val) => {
  if (val <= window.innerWidth / 2) {
    val = 0;
  } else {
    val = window.innerWidth - 100;
  }
  return val;
};
 
const el = ref(null);
const { x, y, style, isDragging } = useDraggable(el, {
  initialValue: { x: 0, y: window.innerHeight - 200 },
  preventDefault: true,
  exact: true,
  onEnd: mouseup,
 
});
window.addEventListener('resize', function () {
  x.value = movetoside(x.value);
});
 
</script>
 
<style scoped lang="scss">
.customer_class {
  position: fixed;
  z-index: 9999;
  background-color: #e8f4ff;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #3673ea;
  cursor: pointer;
  font-weight: bold;
}
</style>