refactor(levitatedsphere): 重构悬浮工具球

src/components/ECharts/GroupLegend/index.vue

@@ -15,9 +15,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
+<script setup>
+defineProps({
   /**
   * 数据格式: [
   *   { // 每一列组
@@ -38,7 +37,7 @@ export default {
   *     orient: '一组内的排列方式' // verticalAlign 垂直排列（默认），horizontal 水平排列
   *   }
   * ]
-  */
+*/
   legendData: {
     type: Array,
     default: () => []
@@ -47,13 +46,11 @@ export default {
     type: String,
     default: 'horizontal' // 每组之间排列方式: verticalAlign 垂直，horizontal 水平
   }
-  },
-  methods: {
-    handleClick(item) {
+})
+const emit = defineEmits(['clickItem']);
+const handleClick = (item) => {
   item.effective = !item.effective
-      this.$emit('clickItem')
-    }
-  }
+  emit('clickItem', item)
 }
 </script>
 
@@ -179,7 +176,8 @@ export default {
         .e-icon {
           background: lightgray !important;
           border-color: lightgray !important;
-          &:before{
+
+          &:before {
             border-color: lightgray !important;
           }
         }

src/components/LevitatedSphere/index.vue

@@ -22,10 +22,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'LevitatedSphere',
-  props: {
+<script setup>
+const props = defineProps({
   itemWidth: {
     // 悬浮按钮宽度
     type: Number,
@@ -46,76 +44,68 @@ export default {
     type: Number,
     default: 0.85,
   }
-  },
-  data() {
-    return {
-      top: 0,
-      left: 0,
-      clientWidth: 0,
-      clientHeight: 0,
-      drawer: false,
-      downPoint: {},
-      upPoint: {}
-    };
-  },
-  created() {
-    this.resize()
-  },
-  mounted() {
-    window.addEventListener('resize', this.resize)
-    this.$nextTick(() => {
-      const sphereBtn = this.$refs.levitatedSphere;
+})
+
+const levitatedSphere = ref(null)
+const top = ref(0)
+const left = ref(0)
+const clientWidth = ref(0)
+const clientHeight = ref(0)
+const drawer = ref(false)
+const downPoint = reactive({})
+const upPoint = reactive({})
+
+const resize = () => {
+  clientWidth.value = document.documentElement.clientWidth;
+  clientHeight.value = document.documentElement.clientHeight;
+  left.value = clientWidth.value - props.itemWidth - props.gapWidth;
+  top.value = clientHeight.value * props.coefficientHeight;
+}
+resize()
+
+onMounted(() => {
+  window.addEventListener('resize', resize)
+})
+nextTick(() => {
   let isDown = false
-      sphereBtn.addEventListener('mousedown', (e) => {
+  levitatedSphere.value.addEventListener('mousedown', (e) => {
     e.preventDefault();
-        sphereBtn.style.transition = 'none';
-        this.downPoint = {
-          x: e.clientX,
-          y: e.clientY
-        };
+    levitatedSphere.value.style.transition = 'none';
+    downPoint.x = e.clientX
+    downPoint.y = e.clientY
     isDown = true
-      });
+  })
   // 在拖拽过程中，组件应该跟随手指的移动而移动
   window.addEventListener('mousemove', (e) => {
     e.preventDefault();
     if (isDown) {
       let touch = e;
       // 限制 left 和 top 的值，使其不会超出可视区域
-          this.left = Math.max(this.gapWidth, Math.min(touch.clientX - 20, this.clientWidth - this.itemWidth - this.gapWidth));
-          this.top = Math.max(0, Math.min(touch.clientY - 25, this.clientHeight - this.itemHeight));
+      left.value = Math.max(props.gapWidth, Math.min(touch.clientX - 20, clientWidth.value - props.itemWidth - props.gapWidth));
+      top.value = Math.max(0, Math.min(touch.clientY - 25, clientHeight.value - props.itemHeight));
     }
   });
   // 拖拽结束后，重新调整组件的位置并重新设置过渡动画
   window.addEventListener('mouseup', (e) => {
-        sphereBtn.style.transition = 'all 0.5s';
-        if (this.left > document.documentElement.clientWidth / 2) {
-          this.left = document.documentElement.clientWidth - this.itemWidth - this.gapWidth;
+    levitatedSphere.value.style.transition = 'all 0.5s';
+    if (left.value > document.documentElement.clientWidth / 2) {
+      left.value = document.documentElement.clientWidth - props.itemWidth - props.gapWidth;
     } else {
-          this.left = this.gapWidth;
+      left.value = props.gapWidth;
     }
     isDown = false
-        this.upPoint = {
-          x: e.clientX,
-          y: e.clientY
-        };
-      });
-    });
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.resize)
-  },
-  methods: {
-    resize() {
-      this.clientWidth = document.documentElement.clientWidth;
-      this.clientHeight = document.documentElement.clientHeight;
-      this.left = this.clientWidth - this.itemWidth - this.gapWidth;
-      this.top = this.clientHeight * this.coefficientHeight;
-    },
-    handleClick() {
-      if (this.downPoint.x === this.upPoint.x && this.downPoint.y === this.upPoint.y) {
-        this.drawer = !this.drawer
-      }
-    }
+    upPoint.x = e.clientX
+    upPoint.y = e.clientY
+  })
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resize)
+})
+
+const handleClick = () => {
+  if (downPoint.x === upPoint.x && downPoint.y === upPoint.y) {
+    drawer.value = !drawer.value
   }
 }
 </script>
@@ -139,9 +129,12 @@ export default {
     padding: 10px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(auto-fill, 30px); /* 明确指定行高为100px */
-    grid-auto-rows: 30px; /* 自动生成的行高也为100px */
-    grid-gap: 20px 5px; /* 上下间距20px，左右间距5px */
+    grid-template-rows: repeat(auto-fill, 30px);
+    /* 明确指定行高为100px */
+    grid-auto-rows: 30px;
+    /* 自动生成的行高也为100px */
+    grid-gap: 20px 5px;
+    /* 上下间距20px，左右间距5px */
     width: 100%;
 
     .el-button {
@@ -149,6 +142,7 @@ export default {
       margin: 0;
     }
   }
+
   @media (max-width: 768px) {
     .wrap {
       width: 30px;