|
|
@@ -51,7 +51,7 @@ |
|
|
|
v-for="(item, index) in materialList.scList"
|
|
|
|
:key="item.id"
|
|
|
|
class="scListItem"
|
|
|
|
:class="showBorderActive == item.id ? 'border' : ''"
|
|
|
|
:class="scBorderActive == index ? 'border' : ''"
|
|
|
|
@mousedown.stop="handleDragSc(item, index, $event)"
|
|
|
|
:style="{
|
|
|
|
top: item.y / props.proportion + 'px',
|
|
|
@@ -64,7 +64,7 @@ |
|
|
|
<img id="scListItemImg" draggable="false" :src="item.material" alt="" />
|
|
|
|
<div ref="box1" class="stretchBox box1"></div>
|
|
|
|
<div
|
|
|
|
v-show="showBorderActive == item.id"
|
|
|
|
v-show="scBorderActive == index"
|
|
|
|
class="stretchBox box2"
|
|
|
|
@click="delScListItem(index)"
|
|
|
|
>
|
|
|
@@ -77,7 +77,7 @@ |
|
|
|
</div>
|
|
|
|
<div class="stretchBox box3"></div>
|
|
|
|
<div
|
|
|
|
v-show="showBorderActive == item.id"
|
|
|
|
v-show="scBorderActive == index"
|
|
|
|
ref="box4"
|
|
|
|
@mousedown.stop="changeScaleSc(index, $event)"
|
|
|
|
class="stretchBox box4"
|
|
|
@@ -161,6 +161,7 @@ const virtualStyle = computed(() => { |
|
|
|
});
|
|
|
|
// 拖动盒子
|
|
|
|
const showBorderActive = ref(-1); //判断显示边框
|
|
|
|
const scBorderActive = ref('')
|
|
|
|
watch(
|
|
|
|
() => props.materialList.virtual.id,
|
|
|
|
(newValue, oldValue) => {
|
|
|
@@ -253,7 +254,7 @@ function changeScale(event) { |
|
|
|
//#region 素材图逻辑
|
|
|
|
const handleDragSc = (item, index, event) => {
|
|
|
|
realImgUrl.value = item.material;
|
|
|
|
|
|
|
|
scBorderActive.value= index
|
|
|
|
showBorderActive.value = item.id;
|
|
|
|
event.preventDefault();
|
|
|
|
const imageElement = fatherBox.value;
|
|
|
|