uni-app 拖拽图片删除功能

在实现 uni-app 的拖拽图片删除功能时，我们可以结合 Vue.js 的事件处理机制与 CSS 的样式调整来实现。以下是一个简单的代码示例，展示如何在 uni-app 中实现这一功能。

1. 页面结构（template）

<template>
  <view class="container">
    <view
      v-for="(image, index) in images"
      :key="index"
      class="image-wrapper"
      draggable="true"
      @dragstart="onDragStart(index)"
      @dragover.prevent
      @drop="onDrop(index)"
    >
      <image :src="image" class="image" />
      <view
        v-if="draggingIndex === index"
        class="delete-btn"
        @click="removeImage(index)"
      >
        ❌
      </view>
    </view>
  </view>
</template>

2. 脚本部分（script）

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        // 更多图片URL
      ],
      draggingIndex: null,
    };
  },
  methods: {
    onDragStart(index) {
      this.draggingIndex = index;
    },
    onDrop(index) {
      this.draggingIndex = null;
    },
    removeImage(index) {
      this.images.splice(index, 1);
    },
  },
};
</script>

3. 样式部分（style）

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
.image-wrapper {
  position: relative;
  margin: 10px;
}
.image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.delete-btn {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  display: none; /* 默认隐藏删除按钮 */
}
.image-wrapper:hover .delete-btn,
.image-wrapper.dragging .delete-btn {
  display: block; /* 鼠标悬停或拖拽时显示删除按钮 */
}
</style>

注意：由于 uni-app 在真机环境中对 draggable 属性的支持可能有差异，且拖拽事件在不同平台（如微信小程序）上可能有不同的表现，因此上述代码可能需要根据具体平台进行适当调整。另外，由于 uni-app 并不直接支持 CSS 的 :hover 伪类（特别是在小程序中），删除按钮的显示逻辑可能需要通过 JavaScript 的事件监听来实现更广泛的兼容性。