實(shí)現(xiàn)內(nèi)容

需要實(shí)現(xiàn)點(diǎn)擊圖片標(biāo)記紅點(diǎn)，主要實(shí)現(xiàn)了兩種方式：

1. 只要鼠標(biāo)點(diǎn)擊，就進(jìn)行標(biāo)記，可標(biāo)記多個(gè)點(diǎn),再次點(diǎn)擊已標(biāo)記的點(diǎn)，就取消勾選

2. 鼠標(biāo)多次點(diǎn)擊界面只存在一個(gè)點(diǎn)

一、只要鼠標(biāo)點(diǎn)擊，就進(jìn)行標(biāo)記，可標(biāo)記多個(gè)點(diǎn),再次點(diǎn)擊已標(biāo)記的點(diǎn)，就取消標(biāo)記

實(shí)現(xiàn)效果

實(shí)現(xiàn)代碼

<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">點(diǎn)擊鼠標(biāo)左鍵，進(jìn)行標(biāo)注</el-tag>
      <el-form-item label="X軸坐標(biāo):">
        {{ markData.xAxis }}
      </el-form-item>
      <el-form-item label="Y軸坐標(biāo):">
        {{ markData.yAxis }}
      </el-form-item>
    </el-form>

  </div>
</template>
  
<script>

export default {
  name: "markPointPage",
  data() {
    return {
      // 標(biāo)記圖坐標(biāo)顯示
      markData: {
        xAxis: 0,
        yAxis: 0,
        rowIndex: 0,
        imageUrl: ''
      },
      // 紅點(diǎn)數(shù)
      index: 0
    }

  },

  methods: {
    clickMarkPoint(e) {
      // e.offsetX 相對(duì)于圖片的X坐標(biāo)  
      //  e.offsetY 相對(duì)于圖片的Y坐標(biāo)
      this.markPoint(e.offsetX, e.offsetY);
      this.markData.xAxis = e.offsetX;
      this.markData.yAxis = e.offsetY;
    },
    markPoint(offsetX, offsetY) {
      var nameIndex=this.index++;
      // 點(diǎn)擊多個(gè)點(diǎn)，生成多個(gè)值
      var div = document.createElement("div"+nameIndex);
      div.className = "marker";
      div.id = "marker"+nameIndex;
      // 紅點(diǎn)的寬
      div.style.width = "45px";
      // 紅點(diǎn)的高
      div.style.height = "45px";
      // 紅點(diǎn)顏色
      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);

      // 添加點(diǎn)擊事件，再次點(diǎn)擊標(biāo)記點(diǎn)，則移除紅點(diǎn)
      document.getElementById("marker"+nameIndex).addEventListener("click", function(){
        // 移除點(diǎn)
        console.log(nameIndex)
        var markPointAxis = document.getElementById("marker"+nameIndex);
        markPointAxis.remove(markPointAxis);
      });
    }
  }

}

</script>

二、鼠標(biāo)多次點(diǎn)擊界面只存在一個(gè)點(diǎn)

實(shí)現(xiàn)效果

實(shí)現(xiàn)代碼

<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">點(diǎn)擊鼠標(biāo)左鍵，進(jìn)行標(biāo)注</el-tag>
      <el-form-item label="X軸坐標(biāo):">
        {{ markData.xAxis }}
      </el-form-item>
      <el-form-item label="Y軸坐標(biāo):">
        {{ markData.yAxis }}
      </el-form-item>
    </el-form>

  </div>
</template>
  
<script>

export default {
  name: "markPointPage",
  data() {
    return {
      // 標(biāo)記圖坐標(biāo)顯示
      markData: {
        xAxis: 0,
        yAxis: 0,
        rowIndex: 0,
        imageUrl: ''
      },
      // 紅點(diǎn)數(shù)
      index: 0
    }

  },

  methods: {
    clickMarkPoint(e) {
      // e.offsetX 相對(duì)于圖片的X坐標(biāo)  
      //  e.offsetY 相對(duì)于圖片的Y坐標(biāo)
      this.markPoint(e.offsetX, e.offsetY);
      this.markData.xAxis = e.offsetX;
      this.markData.yAxis = e.offsetY;
    },
    markPoint(offsetX, offsetY) {
      // 頁(yè)面只有一個(gè)點(diǎn)，再次移除marker
      if (document.getElementsByClassName("marker").length > 0) {
        // 移除點(diǎn)
        var markPointAxis = document.getElementById("marker");
        markPointAxis.remove(markPointAxis);
      }
      var div = document.createElement("div");
      div.className = "marker";
      div.id = "marker";
      // 紅點(diǎn)的寬
      div.style.width = "45px";
      // 紅點(diǎn)的高
      div.style.height = "45px";
      // 紅點(diǎn)顏色
      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>

如果對(duì)您有幫助，點(diǎn)個(gè)贊，O(∩_∩)O哈哈~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-516760.html