但是这个删除不能对应每张图片都有红叉
时间: 2024-04-12 13:32:27 浏览: 19
非常抱歉给您带来了困扰。在 HBuilderX 中实现图片对应的红叉和删除功能比较复杂,需要借助 JavaScript 的事件处理和 DOM 操作。以下是一个可能的解决方案:
```html
<template>
<div class="fb_content">
<textarea v-model="textVal" @input="handleTextInput" placeholder="请描述一下您的问题"></textarea>
<div class="fb_tool">
<button @click="handleChooseImg">+</button>
<div class="up_img_item" v-for="(item, index) in chooseImgs" :key="index">
<img :src="item" :style="{ width: '200px', height: '200px' }" :class="{ 'rounded': true }" />
<span class="delete-btn">×</span>
</div>
</div>
</div>
</template>
<style>
.rounded {
border-radius: 50%;
}
.delete-btn {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
color: red;
font-size: 20px;
}
</style>
<script>
export default {
data() {
return {
textVal: '',
chooseImgs: []
};
},
mounted() {
// 监听删除按钮的点击事件
const deleteBtns = document.querySelectorAll('.delete-btn');
deleteBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
this.handleRemoveImg(index);
});
});
},
methods: {
handleChooseImg() {
// 添加图片逻辑
// ...
// 添加图片后重新绑定删除按钮的事件监听
this.bindDeleteBtnEvent();
},
handleRemoveImg(index) {
// 删除图片逻辑
// ...
// 删除图片后重新绑定删除按钮的事件监听
this.bindDeleteBtnEvent();
},
bindDeleteBtnEvent() {
const deleteBtns = document.querySelectorAll('.delete-btn');
deleteBtns.forEach((btn, index) => {
btn.removeEventListener('click', () => {
this.handleRemoveImg(index);
});
});
deleteBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
this.handleRemoveImg(index);
});
});
},
handleTextInput() {
// 处理文本输入的逻辑
// ...
}
}
};
</script>
```
在这个解决方案中,我们使用 `mounted` 钩子函数来在组件挂载后绑定删除按钮的事件监听。同时,为了确保每次添加或删除图片后,删除按钮的事件监听都能正确绑定,我们在 `handleChooseImg` 和 `handleRemoveImg` 方法中重新调用了 `bindDeleteBtnEvent` 方法。
请注意,这种解决方案使用了 JavaScript 的 DOM 操作,不太符合 Vue.js 的响应式原则。如果您希望更好地遵循 Vue.js 的设计原则,可以尝试使用 Vue.js 的组件方式来实现图片上传和删除功能。
再次为之前的误导道歉,希望这次的解决方案能够满足您的需求。如果还有其他问题,请随时提问。