点击图片标记红点

   /** 获取图片的xy坐标 【点击】 */
    getMouseXY (e) {
      console.log('dadada')
      // offset 是点击当前对象【这里点击 img 】的偏移量
      this.imgX = e.offsetX
      this.imgY = e.offsetY

      // 渲染红点
      this.markPoint(e.offsetX, e.offsetY)
    },
    // 创建红点 渲染到页面
    markPoint (offsetX, offsetY) {
      // console.log(11111111111)
      // 保持页面只有一个点 
      if (document.getElementsByClassName("marker").length > 0) {
        // 移除点
        var markPointAxis = document.getElementById("marker")
        markPointAxis.remove(markPointAxis)
      }
      // 创建 div 标签
      var div = document.createElement("div")
      // 新建 marker 的类
      div.className = "marker"
      div.id = "marker"
      // 红点的宽
      div.style.width = "10px"
      // 红点的高
      div.style.height = "10px"
      // 红点颜色
      // div.style.backgroundColor = "white"
      div.style.left = offsetX + 15 + "px"
      div.style.top = offsetY + 25 + "px"
      div.style.position = "absolute"
      // 边框半径百分比
      div.style.borderRadius = "50%"
      div.innerHTML = "<i style='color:yellow' class='el-icon-add-location'></i>"
      console.log(document.querySelector("#block .el-dialog .el-dialog__body"))
      document.querySelector("#block .el-dialog .el-dialog__body").appendChild(div)
      // document.getElementsByClassName("el-dialog").appendChild(div)
    },