feat: 拖拽组件容器提示

src/views/designer/component/ComponentWrapper.vue

@@ -8,7 +8,7 @@
       <component :is="component" v-bind="componentData.props" />
     </div>
     <div v-if="showEditBox" class="edit-box" :style="editWapperStyle">
-      <span class="name-tip">{{ componentData.name }}</span>
+      <span class="name-tip">{{ getTip }}</span>
       <UseDraggable
         v-for="item in dragPointList"
         :key="item"
@@ -69,8 +69,15 @@ const showEditBox = computed(() => {
     projectStore.selectedElementKeys.includes(componentData.key)
   );
 });
+// 获取提示信息
+const getTip = computed(() => {
+  return showNameTip.value 
+  ? componentData.name
+  : `x: ${Math.round(componentData.position.x)} y: ${Math.round(componentData.position.y)}`;
+});
 
 let isPointDragFlag = false;
+const showNameTip = ref(true);
 // 拖拽移动组件
 useDraggable(componentWrapperRef, {
   onMove: (position) => {
@@ -88,7 +95,11 @@ useDraggable(componentWrapperRef, {
   },
   onStart: () => {
     projectStore.setSelectedElementKeys([componentData.key]);
+    showNameTip.value = false;
   },
+  onEnd: () => {
+    showNameTip.value = true;
+  }
 });
 const handleSelectComponent = () => {
   projectStore.setSelectedElementKeys([componentData.key]);
@@ -171,10 +182,12 @@ const handleDragStart = (_, e: PointerEvent) => {
   startPoint.x = e.x;
   startPoint.y = e.y;
   isPointDragFlag = true;
+  showNameTip.value = false;
 };
 // 拖拽点结束
 const handleDragEnd = () => {
   isPointDragFlag = false;
+  showNameTip.value = true;
 };
 </script>