vue2 el-upload单张上传鼠标悬浮图片上显示遮层删除查看

在Vue2中，`el-upload` 是 Element UI 提供的一个方便文件上传的组件。如果你想实现在用户将鼠标悬停在上传的图片上时显示遮罩层，并提供删除和查看图片的功能，你可以这样做：

首先，在模板部分（HTML）中设置基本的上传元素，并添加事件监听：

<el-upload
  ref="upload"
  :action="uploadUrl"
  :on-change="handleChange"
  :on-success="handleSuccess"
  :before-remove="beforeRemove"
>
  <img :src="imageUrl" alt="图片预览" @mouseenter="showMask" @mouseleave="hideMask" />
  <i class="el-icon-upload"></i>
</el-upload>

<!-- 遮罩层 -->
<div v-if="showMask" class="mask" @click="hideMask">
  <div class="mask-inner">
    <button @click="removeFile">删除</button>
    <button @click="viewImage">查看</button>
  </div>
</div>

然后，在 Vue 实例中定义相应的数据和方法：

data() {
  return {
    imageUrl: '',
    showMask: false,
    file: null, // 存储上传的文件信息
  };
},
methods: {
  handleChange(file) {
    this.file = file;
    this.imageUrl = URL.createObjectURL(file);
  },
  handleSuccess(response, file) {
    // 文件上传成功处理，这里可以更新服务器返回的url
    this.showMask = true; // 显示遮罩层
  },
  beforeRemove(file) {
    if (confirm('确定要删除此文件吗?')) { // 弹窗确认是否删除
      return true;
    }
    return false;
  },
  removeFile() {
    this.$refs.upload.remove(this.file); // 删除文件
    this.showMask = false; // 隐藏遮罩层
    this.imageUrl = ''; // 清空图片URL
  },
  viewImage() {
    // 如果需要打开图片，可以使用默认浏览器或者自定义的方式显示图片
    window.open(this.imageUrl);
  },
  hideMask() {
    this.showMask = false; // 隐藏遮罩层
  },
},

记得在你的样式文件中添加遮罩层的样式。以上就是基础的实现，你可以根据实际需求进行调整。