|
|
@@ -1,8 +1,11 @@
|
|
|
<template>
|
|
|
- <div class="tel-view-tem" :style="containerStyle" @mousedown="onMouseDown">
|
|
|
+ <div class="tel-view-tem" @mousedown="onMouseDown">
|
|
|
+ <img class="bg-src" :src="bgSrc" />
|
|
|
<!-- 拖动选区样式 -->
|
|
|
<div v-if="isDragging" class="drag-area" :style="dragAreaStyle"></div>
|
|
|
- <slot></slot>
|
|
|
+ <div class="pro-content">
|
|
|
+ <slot></slot>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -27,19 +30,7 @@ const endPoint = ref({ x: 0, y: 0 });
|
|
|
const imgHeight = ref(props.minHeight);
|
|
|
const imgWidth = ref(props.width);
|
|
|
|
|
|
-watch(() => props.bgSrc, (val) => {
|
|
|
- if (val) {
|
|
|
- const img = new window.Image();
|
|
|
- img.src = val;
|
|
|
- img.onload = () => {
|
|
|
- imgHeight.value = img.height;
|
|
|
- imgWidth.value = img.width;
|
|
|
- };
|
|
|
- } else {
|
|
|
- imgHeight.value = props.minHeight;
|
|
|
- imgWidth.value = props.width;
|
|
|
- }
|
|
|
-}, { immediate: true });
|
|
|
+
|
|
|
|
|
|
const containerStyle: any = computed(() => {
|
|
|
if (props.bgSrc) {
|
|
|
@@ -76,8 +67,8 @@ const dragAreaStyle: any = computed(() => {
|
|
|
top: `${y}px`,
|
|
|
width: `${w}px`,
|
|
|
height: `${h}px`,
|
|
|
- border: '1px dashed #409eff',
|
|
|
- background: 'rgba(64,158,255,0.1)',
|
|
|
+ border: '2px dashed #409eff',
|
|
|
+ background: 'rgba(116, 251, 229,0.3)',
|
|
|
pointerEvents: 'none',
|
|
|
zIndex: 10,
|
|
|
};
|
|
|
@@ -133,7 +124,24 @@ function onMouseUp() {
|
|
|
position: relative;
|
|
|
}
|
|
|
.drag-area {
|
|
|
+ position: relative;
|
|
|
z-index: 100;
|
|
|
transition: none;
|
|
|
}
|
|
|
+.bg-src {
|
|
|
+ width: 750px;
|
|
|
+ display: block;
|
|
|
+ user-select: none;
|
|
|
+ pointer-events: none;
|
|
|
+ height: auto;
|
|
|
+ object-fit: contain;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+.pro-content {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
</style>
|