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