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

src/components/ECharts/GroupLegend/index.vue

@@ -15,45 +15,42 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    /**
-    * 数据格式: [
-    *   { // 每一列组
-    *     data: [
-    *       {
-    *         name: '系列1名字',
-    *         type: 'bar', // 类型: bar 柱状图（默认），line 横线+圆圈, circle 圆圈
-    *         effective: true, // 有效性
-    *         show: true // 是否显示
-    *       },
-    *       {
-    *         name: '系列2名字',
-    *         type: 'line', // 类型: bar 柱状图（默认），line 横线+圆圈, circle 圆圈
-    *         effective: true, // 有效性
-    *         show: true // 是否显示
-    *       }
-    *     ],
-    *     orient: '一组内的排列方式' // verticalAlign 垂直排列（默认），horizontal 水平排列
-    *   }
-    * ]
-  */
-    legendData: {
-      type: Array,
-      default: () => []
-    },
-    origin: {
-      type: String,
-      default: 'horizontal' // 每组之间排列方式: verticalAlign 垂直，horizontal 水平
-    }
+<script setup>
+defineProps({
+  /**
+  * 数据格式: [
+  *   { // 每一列组
+  *     data: [
+  *       {
+  *         name: '系列1名字',
+  *         type: 'bar', // 类型: bar 柱状图（默认），line 横线+圆圈, circle 圆圈
+  *         effective: true, // 有效性
+  *         show: true // 是否显示
+  *       },
+  *       {
+  *         name: '系列2名字',
+  *         type: 'line', // 类型: bar 柱状图（默认），line 横线+圆圈, circle 圆圈
+  *         effective: true, // 有效性
+  *         show: true // 是否显示
+  *       }
+  *     ],
+  *     orient: '一组内的排列方式' // verticalAlign 垂直排列（默认），horizontal 水平排列
+  *   }
+  * ]
+*/
+  legendData: {
+    type: Array,
+    default: () => []
   },
-  methods: {
-    handleClick(item) {
-      item.effective = !item.effective
-      this.$emit('clickItem')
-    }
+  origin: {
+    type: String,
+    default: 'horizontal' // 每组之间排列方式: verticalAlign 垂直，horizontal 水平
   }
+})
+const emit = defineEmits(['clickItem']);
+const handleClick = (item) => {
+  item.effective = !item.effective
+  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,100 +22,90 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'LevitatedSphere',
-  props: {
-    itemWidth: {
-      // 悬浮按钮宽度
-      type: Number,
-      default: 46,
-    },
-    itemHeight: {
-      // 悬浮按钮高度
-      type: Number,
-      default: 46,
-    },
-    gapWidth: {
-      // 距离屏幕左右两边距离
-      type: Number,
-      default: 10,
-    },
-    coefficientHeight: {
-      // 从上到下距离比例
-      type: Number,
-      default: 0.85,
-    }
-  },
-  data() {
-    return {
-      top: 0,
-      left: 0,
-      clientWidth: 0,
-      clientHeight: 0,
-      drawer: false,
-      downPoint: {},
-      upPoint: {}
-    };
+<script setup>
+const props = defineProps({
+  itemWidth: {
+    // 悬浮按钮宽度
+    type: Number,
+    default: 46,
   },
-  created() {
-    this.resize()
+  itemHeight: {
+    // 悬浮按钮高度
+    type: Number,
+    default: 46,
   },
-  mounted() {
-    window.addEventListener('resize', this.resize)
-    this.$nextTick(() => {
-      const sphereBtn = this.$refs.levitatedSphere;
-      let isDown = false
-      sphereBtn.addEventListener('mousedown', (e) => {
-        e.preventDefault();
-        sphereBtn.style.transition = 'none';
-        this.downPoint = {
-          x: e.clientX,
-          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));
-        }
-      });
-      // 拖拽结束后，重新调整组件的位置并重新设置过渡动画
-      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;
-        } else {
-          this.left = this.gapWidth;
-        }
-        isDown = false
-        this.upPoint = {
-          x: e.clientX,
-          y: e.clientY
-        };
-      });
-    });
+  gapWidth: {
+    // 距离屏幕左右两边距离
+    type: Number,
+    default: 10,
   },
-  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
-      }
+  coefficientHeight: {
+    // 从上到下距离比例
+    type: Number,
+    default: 0.85,
+  }
+})
+
+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
+  levitatedSphere.value.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    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 的值，使其不会超出可视区域
+      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) => {
+    levitatedSphere.value.style.transition = 'all 0.5s';
+    if (left.value > document.documentElement.clientWidth / 2) {
+      left.value = document.documentElement.clientWidth - props.itemWidth - props.gapWidth;
+    } else {
+      left.value = props.gapWidth;
     }
+    isDown = false
+    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,16 +129,20 @@ 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 {
       width: 100%;
       margin: 0;
     }
   }
+
   @media (max-width: 768px) {
     .wrap {
       width: 30px;