图片预览区域删除图标需用相对定位容器包裹image和绝对定位图标，父容器必须设position: relative，图标设position: absolute、top/right偏移及z-index；点击事件绑定在容器而非image上；v-for的key必须唯一（如img.id），删除时用findIndex而非splice(index,1)；图标最小点击区域≥44rpx×44rpx，真机测试需防越界调用。
图片预览区域必须用绝对定位包裹删除图标
直接在 position: absolute 定位到右上角。
常见错误是忘记给父容器加 position: relative，导致 absolute 脱离文档流后飘到页面顶部或左上角；或者没设 top 和 right 偏移，图标贴边但被裁切。
- 父容器（如
position: relative - 删除图标需设
position: absolute; top: 12rpx; right: 12rpx; z-index: 10（数值按实际图标大小微调） - 避免用
transform: translate(-50%, -50%)这类居中技巧，容易在 H5 端因缩放失真 - 真机调试时注意 iOS 微信里
z-index失效问题，可加background: rgba(0,0,0,0.7)提升点击区域可见性
删除图标点击事件必须绑定在容器而非 image 上
@click 支持不稳定，尤其当开启 mode="aspectFill" 时，边缘区域可能无法触发。把点击逻辑挂在外层
同时要防止误触：删除图标本身需要 pointer-events: auto（默认继承），但若父容器用了 flex 或 overflow: hidden，可能截断事件冒泡。
- 删除按钮的
@click必须传入索引，例如：@click="removeImage(index)" - 不要依赖
event.target判断点击位置，uni-app 的事件对象在不同平台返回字段不一致 - H5 端若发现点击无响应，检查是否父容器有
touch-action: none或user-select: none干扰
v-for 的 key 不能用 index，否则删除后状态错乱
用 :key="index" 是最常踩的坑 —— 删除第 2 项后，后续所有项的 index 都会前移，但 Vue 的 diff 算法仍会复用旧 DOM 节点，导致「第 3 张图的删除按钮实际删的是第 2 张」这类诡异行为。
哪怕你只是临时路径数组，也得为每张图生成唯一标识。临时方案可用时间戳 + 序号拼接，生产环境建议用 Math.random().toString(36).substr(2, 9) 或 UUID。
- 初始化图片数据时就带 id：
{ id: `img_${Date.now()}_${i}`, path: p } -
v-for写成：v-for="img in selectedImages" :key="img.id" - 删除方法里用
findIndex找 id 对应项，而不是靠 index 下标 - 别用
splice(index, 1)直接删 —— 如果数组是响应式对象属性，splice可能不触发视图更新（尤其搭配Object.freeze或 Vuex 时）
图标样式在不同平台渲染差异大，需单独适配
微信小程序里 font-size: 40rpx 在 iOS 和安卓上看起来大小差一倍。删除图标不是装饰，而是核心交互控件，必须保证最小点击区域 ≥ 44rpx × 44rpx。
- 图标容器用
display: flex; align-items: center; justify-content: center居中内容，比纯文字更稳 - 文字 × 用
font-family: 'PingFang SC', 'Helvetica Neue'避免安卓端显示方块 - 背景圆角统一用
border-radius: 50%，不要混用px和rpx - 真机测试重点看华为 EMUI 和 iOS 微信：前者常把小图标渲染模糊，后者对
opacity动画有性能降级
实际项目里最易被忽略的，是删除图标在图片加载完成前就显示出来 —— 如果用户快速连点，可能触发多次 removeImage 调用，而数组长度已变，index 就越界了。要么加 loading 状态锁，要么在点击回调开头加 if (!this.selectedImages[index]) return 防御。
