|
@@ -1,5 +1,6 @@
|
|
|
<template>
|
|
<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>
|
|
<div v-if="isDragging" class="drag-area" :style="dragAreaStyle"></div>
|
|
|
<slot></slot>
|
|
<slot></slot>
|
|
@@ -32,6 +33,7 @@ watch(() => props.bgSrc, (val) => {
|
|
|
const img = new window.Image();
|
|
const img = new window.Image();
|
|
|
img.src = val;
|
|
img.src = val;
|
|
|
img.onload = () => {
|
|
img.onload = () => {
|
|
|
|
|
+ console.log('Image loaded:', img.width, img.height);
|
|
|
imgHeight.value = img.height;
|
|
imgHeight.value = img.height;
|
|
|
imgWidth.value = img.width;
|
|
imgWidth.value = img.width;
|
|
|
};
|
|
};
|
|
@@ -136,4 +138,12 @@ function onMouseUp() {
|
|
|
z-index: 100;
|
|
z-index: 100;
|
|
|
transition: none;
|
|
transition: none;
|
|
|
}
|
|
}
|
|
|
|
|
+.bg-src {
|
|
|
|
|
+ width: 750px;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ user-select: none;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ object-fit: contain;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|
