[fix] 修复拖拽上传图片组件,删除第一个图片会与添加按钮重叠的bug

This commit is contained in:
zhengliming
2024-01-10 01:23:42 +08:00
parent c67be5adf8
commit 025555e92b
@@ -7,6 +7,7 @@
}" }"
@mouseenter="mouseEnterArea" @mouseenter="mouseEnterArea"
@mouseleave="mouseLeaveArea" @mouseleave="mouseLeaveArea"
v-if="show"
> >
<block <block
v-for="(item, index) in lists" v-for="(item, index) in lists"
@@ -298,7 +299,8 @@
y: 0 y: 0
}, },
timer: null, timer: null,
dragging: false dragging: false,
show:true
} }
}, },
watch: { watch: {
@@ -551,22 +553,24 @@
if (index >= 0 && index < this.lists.length) { if (index >= 0 && index < this.lists.length) {
let currentItemIndex = this.lists[index].index let currentItemIndex = this.lists[index].index
this.lists.splice(index, 1) this.lists.splice(index, 1)
// 重新排列列表信息 this.show = false;
for (let item of this.lists) { setTimeout(()=>{
if (item.index > currentItemIndex) { // 重新排列列表信息
item.index -= 1 for (let item of this.lists) {
item.x = item.positionX * this.baseData.widthPx if (item.index > currentItemIndex) {
item.y = item.positionY * this.baseData.heightPx item.index -= 1
item.positionX = item.index % this.baseData.columns
item.positionY = Math.floor(item.index / this.baseData.columns)
this.$nextTick(() => {
item.x = item.positionX * this.baseData.widthPx item.x = item.positionX * this.baseData.widthPx
item.y = item.positionY * this.baseData.heightPx item.y = item.positionY * this.baseData.heightPx
}) item.positionX = item.index % this.baseData.columns
item.positionY = Math.floor(item.index / this.baseData.columns)
this.$nextTick(() => {
item.x = item.positionX * this.baseData.widthPx
item.y = item.positionY * this.baseData.heightPx
})
}
} }
} this.updateAddBtnPositioin()
},50)
this.updateAddBtnPositioin()
} }
}, },
// 预览图片 // 预览图片
@@ -684,8 +688,10 @@
updateAddBtnPositioin() { updateAddBtnPositioin() {
if (this.lists.length >= this.maxCount) return if (this.lists.length >= this.maxCount) return
this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx setTimeout(()=>{
this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx
this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx
},50);
}, },
// 获取排序后数据 // 获取排序后数据
sortList() { sortList() {