修改bug

src/components/DragResizeRotate/DragResizeRotate.vue

@@ -1,6 +1,13 @@
 <template>
-    <VueDragResizeRotate :x="drapJson.x" :y="drapJson.y" :w="drapJson.w" :h="drapJson.h" :r="drapJson.r" :parent="true" @resizing="onResize" @resizestop="onResizeStop" @activated="onActivated" @deactivated="onDeactivated" @dragging="onDrag" @dragstop="onDragStop">
-        <div class="w-100% h-100% d-flex a-c j-c">点击事件区域</div>
+    <VueDragResizeRotate :x="drapJson.x" :y="drapJson.y" class-name-handle="my-handle-class-dd handle" class-name-active="my-active-class-dd" class-name="my-class-dd" :w="drapJson.w" :h="drapJson.h" :r="drapJson.r" :parent="true" @resizing="onResize" @resizestop="onResizeStop" @activated="onActivated" @deactivated="onDeactivated" @dragging="onDrag" @dragstop="onDragStop">
+        <div class="w-100% h-100% d-flex a-c j-c p-rtv">
+            <span>点击事件区域</span>
+            <div class="f-s-18 c-danger delete-icon_box" @click.stop="deleteItem">
+                <el-icon>
+                    <CircleCloseFilled />
+                </el-icon>
+            </div>
+        </div>
     </VueDragResizeRotate>
 </template>
 <script setup lang="ts" name="ptpl-edit-index">
@@ -19,7 +26,8 @@ const emit = defineEmits([
     'dragging',
     'dragstop',
     'resizing',
-    'resizestop'
+    'resizestop',
+    'delete'
 ]);
 const drapJson = ref({
     x: 0,
@@ -49,7 +57,39 @@ const onResizeStop = (x: number, y: number, width: number, height: number) => {
     emit('update:modelValue', { ...drapJson.value, x, y, w: width, h: height });
     emit('resizestop', x, y, width, height);
 };
+const deleteItem = () => {
+    emit('delete')
+};
 watch(() => prop.modelValue, (newVal) => {
     drapJson.value = { ...drapJson.value, ...newVal };
 });
 </script>
+<style lang="scss" scoped>
+.delete-icon_box {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.my-active-class-dd {
+    border-color: #74FBE5;
+}
+
+.my-class-dd {
+    touch-action: none;
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px dashed;
+    border-color: #74FBE5;
+}
+
+.my-handle-class-dd {
+    border: 1px solid #74FBE5;
+}
+</style>

src/views/training/models/meeting-tpl-h5.vue

@@ -3,7 +3,7 @@
         <div class="flex1" style="overflow: auto;">
             <TelViewTem @selectArea="selectArea" :enableDraw="enableDraw" bgColor="#f7f7f7" :bgSrc="form.img">
                 <template v-for="(item, index) in form?.events" :key="index">
-                    <DragResizeRotate v-model="form.events[index]" @activated="activated" @deactivated="deactivated"></DragResizeRotate>
+                    <DragResizeRotate v-model="form.events[index]" @delete="deleteItemEvents($event, index)" @activated="activated" @deactivated="deactivated"></DragResizeRotate>
                 </template>
             </TelViewTem>
         </div>
@@ -37,6 +37,9 @@ const activated = () => {
 const deactivated = () => {
     enableDraw.value = true;
 }
+const deleteItemEvents = (item: any, index: number) => {
+    form.value.events.splice(index, 1);
+}
 const clickInfo = () => {
     console.log(form.value);
 }