vue 鼠标点击图片做红点标记

实现内容

需要实现点击图片标记红点，主要实现了两种方式：

1. 只要鼠标点击，就进行标记，可标记多个点,再次点击已标记的点，就取消勾选

2. 鼠标多次点击界面只存在一个点

一、只要鼠标点击，就进行标记，可标记多个点,再次点击已标记的点，就取消标记

实现效果

实现代码

<template>
  <div class="app-container">

    <el-form size="medium">
      <div id="block">
        <!-- 变量赋值 :src="imageUrl"  -->
        <!-- 直接读取文件路径 :src="require('@/assets/images/profile.jpg')" -->
        <el-image id="imageRef" fit="contain" :src="require('@/assets/images/小狗.jpg')" style="width:640px;height:768px;"
          @click="clickMarkPoint($event)"></el-image>
      </div>
      <el-tag type="info">点击鼠标左键，进行标注</el-tag>
      <el-form-item label="X轴坐标:">
        {{ markData.xAxis }}
      </el-form-item>
      <el-form-item label="Y轴坐标:">
        {{ markData.yAxis }}
      </el-form-item>
    </el-form>

  </div>
</template>
  
<script>

export default {
  name: "markPointPage",
  data() {
    return {
      // 标记图坐标显示
      markData: {
        xAxis: 0,
        yAxis: 0,
        rowIndex: 0,
        imageUrl: ''
      },
      // 红点数
      index: 0
    }

  },

  methods: {
    clickMarkPoint(e) {
      // e.offsetX 相对于图片的X坐标  
      //  e.offsetY 相对于图片的Y坐标
      this.markPoint(e.offsetX, e.offsetY);
      this.markData.xAxis = e.offsetX;
      this.markData.yAxis = e.offsetY;
    },
    markPoint(offsetX, offsetY) {
      var nameIndex=this.index++;
      // 点击多个点，生成多个值
      var div = document.createElement("div"+nameIndex);
      div.className = "marker";
      div.id = "marker"+nameIndex;
      // 红点的宽
      div.style.width = "45px";
      // 红点的高
      div.style.height = "45px";
      // 红点颜色
      div.style.backgroundColor = "red";
      div.style.left = offsetX + "px";
      div.style.top = offsetY + "px";
      div.style.position = "absolute";
      // 边框半径百分比
      div.style.borderRadius = "50%";
      div.innerHTML = "<span><font color='yellow'>谢主隆恩</font></span>";
      document.getElementById("block").appendChild(div);

      // 添加点击事件，再次点击标记点，则移除红点
      document.getElementById("marker"+nameIndex).addEventListener("click", function(){
        // 移除点
        console.log(nameIndex)
        var markPointAxis = document.getElementById("marker"+nameIndex);
        markPointAxis.remove(markPointAxis);
      });
    }
  }

}

</script>

二、鼠标多次点击界面只存在一个点

实现效果

实现代码

<template>
  <div class="app-container">

    <el-form size="medium">
      <div id="block">
        <!-- 变量赋值 :src="imageUrl"  -->
        <!-- 直接读取文件路径 :src="require('@/assets/images/profile.jpg')" -->
        <el-image id="imageRef" fit="contain" :src="require('@/assets/images/小狗.jpg')" style="width:640px;height:768px;"
          @click="clickMarkPoint($event)"></el-image>
      </div>
      <el-tag type="info">点击鼠标左键，进行标注</el-tag>
      <el-form-item label="X轴坐标:">
        {{ markData.xAxis }}
      </el-form-item>
      <el-form-item label="Y轴坐标:">
        {{ markData.yAxis }}
      </el-form-item>
    </el-form>

  </div>
</template>
  
<script>

export default {
  name: "markPointPage",
  data() {
    return {
      // 标记图坐标显示
      markData: {
        xAxis: 0,
        yAxis: 0,
        rowIndex: 0,
        imageUrl: ''
      },
      // 红点数
      index: 0
    }

  },

  methods: {
    clickMarkPoint(e) {
      // e.offsetX 相对于图片的X坐标  
      //  e.offsetY 相对于图片的Y坐标
      this.markPoint(e.offsetX, e.offsetY);
      this.markData.xAxis = e.offsetX;
      this.markData.yAxis = e.offsetY;
    },
    markPoint(offsetX, offsetY) {
      // 页面只有一个点，再次移除marker
      if (document.getElementsByClassName("marker").length > 0) {
        // 移除点
        var markPointAxis = document.getElementById("marker");
        markPointAxis.remove(markPointAxis);
      }
      var div = document.createElement("div");
      div.className = "marker";
      div.id = "marker";
      // 红点的宽
      div.style.width = "45px";
      // 红点的高
      div.style.height = "45px";
      // 红点颜色
      div.style.backgroundColor = "red";
      div.style.left = offsetX + "px";
      div.style.top = offsetY + "px";
      div.style.position = "absolute";
      // 边框半径百分比
      div.style.borderRadius = "50%";
      div.innerHTML = "<span><font color='yellow'>谢主隆恩</font></span>";
      document.getElementById("block").appendChild(div);
    }
  }

}

</script>

如果对您有帮助，点个赞，O(∩_∩)O哈哈~