digital-medicine-front/src/components/DragResizeRotate/DragResizeRotate.vue

<template>
    <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">
        <slot>
            <div class="w-100% h-100% d-flex a-c j-c p-rtv" style="background-color: rgba(116, 251, 229, .3)">
                <span></span>
                <div class="f-s-18 c-danger delete-icon_box" @click.stop="deleteItem">
                    <el-icon>
                        <CircleCloseFilled />
                    </el-icon>
                </div>
            </div>
        </slot>
    </VueDragResizeRotate>
</template>
<script setup lang="ts" name="ptpl-edit-index">
import { propTypes } from '@/utils/propTypes';
import VueDragResizeRotate from '@gausszhou/vue3-drag-resize-rotate';
import '@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css';
const prop = defineProps({
    modelValue: propTypes.any.def({
        id: ''
    })
});
const emit = defineEmits([
    'update:modelValue',
    'activated',
    'deactivated',
    'dragging',
    'dragstop',
    'resizing',
    'resizestop',
    'delete'
]);
const drapJson = ref({
     x: 0, y: 0, w: 100, h: 100,
     r:0,
    ...prop.modelValue
});
const onActivated = () => {
    emit('activated');
};
const onDeactivated = () => {
    emit('deactivated');
};
const onDrag = (left: number, top: number) => {
    emit('dragging', left, top);
};
const onDragStop = (x: number, y: number) => {
    emit('update:modelValue', { ...drapJson.value, x, y });
    emit('dragstop', x, y);
};
const onResize = (x: number, y: number, width: number, height: number) => {
    emit('resizing', x, y, width, height);
};
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('deactivated');
    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: 2px dashed;
    border-color: #74FBE5;
}

.my-handle-class-dd {
    border: 2px solid #74FBE5;
}
</style>