vue---鼠标移入图片出现删除按钮（通过onmouseover实现）

上篇中(https://blog.csdn.net/maidu_xbd/article/details/104350286)通过hover实现鼠标移入图片出现删除按钮功能，存在问题：当未上传照片时，鼠标移入方框区域，仍显示删除图标。

通过onmouseover，onmouseout优化代码如下：

<template>
  <div class="personal">
    <div class="content">
      <!-- 1.标题及图像说明 -->
      <div class="content-desc">
        <div class="title">上传照片</div>
        <div class="desc">照片要求:格式为jpg/jpeg/png</div>
      </div>
      <!-- 2.图像区域 -->
      <div class="content-image">
        <el-form :model="modal">
          <el-form-item prop="base64">
            <el-input
              type="text"
              style="display:none;"
              name="base64"
              v-model="modal.base64"
              autocomplete="off"
            ></el-input>
            <div class="upload-photo">
              <li v-on:mouseover="mouseoverImg()" v-on:mouseout="mouseoutImg()">
                <img ref="img" src="../assets/images/addImage.png" @click="uploadPhoto" />
                <div ref="imgDelete" class="delete-img">
                  <i class="el-icon-delete" @click="deleteImg()"></i>
                </div>
              </li>
            </div>
            <input type="file" hidden ref="photoFile" @change="fileChange" style="display: none;" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal: { base64: "" },
      deleteFlag: false,
      uploadImage: ""
    };
  },
  components: {},
  mounted() {
    //uploadImage为【添加照片】图像
    this.uploadImage = this.$refs.img.src;
    this.$refs.imgDelete.style.display = "none";
  },
  methods: {
    // 鼠标移入图片
    mouseoverImg() {
      if (this.$refs.img.src == this.uploadImage) {
        this.$refs.imgDelete.style.display = "none";
      } else {
        this.$refs.imgDelete.style.display = "block";
      }
    },
    // 鼠标移出图片
    mouseoutImg() {
      this.$refs.imgDelete.style.display = "none";
    },
    // 本地上传头像
    uploadPhoto() {
      this.$refs.photoFile.click();
    },
    // 修改头像
    fileChange(e) {
      let file = this.$refs.photoFile.files[0];
      if (/.(png|jpg|jpeg)$/.test(file.name)) {
        let fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = e => {
          this.$refs.img.src = e.target.result;
          this.$refs.photoFile.value = "";
          this.$set(this.modal, "base64", e.target.result.split(",")[1]);
        };
      } else {
        this.$message({
          message: "请选择符合格式要求的图片",
          type: "warning"
        });
        this.$refs.photoFile.value = "";
      }
    },

    // 删除图片
    deleteImg() {
      this.$confirm("是否删除该照片?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$refs.img.src = this.uploadImage;
          this.$refs.imgDelete.style.display = "none";
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style lang="less">
.personal {
  margin: 10px 0;
  padding: 10px;
  background: #f0f0f0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
  border-radius: 3px;
  padding-bottom: 20px;
  .content {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    padding: 10px;
    // overflow-y: scroll;
    overflow: hidden;
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    //  1.标题及图像说明
    .content-desc {
      margin: 0px 10px;
      .title {
        font-size: 16px;
        border-left: 5px solid #2d8cf0;
        padding-left: 10px;
        margin-bottom: 16px;
      }
      .desc {
        margin-left: 18px;
      }
    }
    // 2.图像区域
    .content-image {
      margin: 25px 28px;
      .upload-photo {
        width: 580px;
        height: 200px;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
        margin-left: 20px;
        margin-top: 0px;
        padding-top: 0px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        li {
          width: 180px;
          height: 180px;
          margin-right: 15px;
          position: relative;
          .delete-img {
            display: block;
            position: absolute;
            width: 180px;
            height: 40px;
            line-height: 40px;
            left: 0px;
            top: 140px;
            background: rgba(59, 60, 61, 0.5);
            // box-sizing: content-box;
            z-index: 999;
            cursor: pointer;
            text-align: right;
            i {
              margin: 8px 10px 0 0;
              display: block;
              font-size: 24px;
              color: white;
            }
          }
          img {
            border: 1px dashed #d9d9d9;
            border-radius: 5px;
            box-sizing: border-box;
            width: 180px;
            height: 180px;
            margin-top: 0px;
            &:hover {
              border: 1px dashed #409eff;
            }
          }
        }
      }
    }
  }
}
</style>