vue 图片标注 标注可移动 加右键自定义菜单

html

<div class="myBiaoZhu" id="myBiaoZhuDiv" @mousedown="moveclick" @contextmenu.prevent="yjmen">

                <img

                  style="position: relative"

                  id="myBiaoZhu"

                  :src="parseImgUrl"

                  width="100%"

                  @click="xltimg($event)"

                  alt=""

                />

              </div>

<div

                v-show="showMen"

                id="myzhushi"

                style="

                  width: 12%;

                  font-size: 12px;

                  border: 1px solid;

                  padding: 6px;

                  border-radius: 3px;

                  position: absolute;

                  z-index: 66;

                  background: white;

                "

              >

                <div style="height: 16px">

                  <i

                    style="float: right"

                    class="el-icon-close"

                    @click="showMen = false"

                  ></i>

                </div>

                <div

                  style="

                    border-bottom: 1px dashed;

                    padding: 4px;

                    cursor: pointer;

                  "

                  @click="removebz"

                >

                  删除

                </div>

                <div

                  style="

                    border-bottom: 1px dashed;

                    padding: 4px;

                    cursor: pointer;

                  "

                >

                  关联检查项

                </div>

              </div>

data(){

        parseImgUrl: require(".jpg"),//换成自己的图片路径

      pointImg: require(".png"),//换成自己的图片路径

      pointSize: 10, //点的大小

      banMa: [],//创建的标注的坐标信息

      showMen: false,控制右键菜单的显示隐藏

      bzid: "",

      iX: 0,

      iY: 0,

      moveid: "",

},

methods:{

// 移动图上的标注

    moveclick(e) {

      let odiv = e.target; //获取目标元素

      let index = this.banMa.findIndex((e) => {

        return e.id == odiv.id;

      });

      if(index==-1){

        return

      }

      //算出鼠标相对元素的位置

      let disX = e.clientX - odiv.offsetLeft;

      let disY = e.clientY - odiv.offsetTop;

      document.onmousemove = (e) => {

        //鼠标按下并移动的事件

        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

        let left = e.clientX - disX;

        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面

        this.positionX = top;

        this.positionY = left;

        //移动当前元素

        this.banMa[index].x=left+10

        this.banMa[index].y=top+20

        // console.log(this.banMa[index])

        odiv.style.left = left + "px";

        odiv.style.top = top+ "px";

      };

      document.onmouseup = (e) => {

        document.onmousemove = null;

        document.onmouseup = null;

      };

    },

//右键菜单

yjmen(e) {

      // console.log(e);

      if(!e.target){

        return

      }

      this.bzid=e.target.id

      let men = document.querySelector("#myzhushi");

      this.showMen = true;

      let index = this.banMa.findIndex((e) => {

        return e.id == this.bzid;

      });

      if(index==-1){

        return

      }

        console.log(this.banMa[index].y)

      men.style.top = this.banMa[index].y + "px";

      men.style.left = this.banMa[index].x + "px";

    },

xltimg(e) {

      var x = e.offsetX || e.layerX;

      var y = e.offsetY || e.layerY;

      var myImg = document.querySelector("#myBiaoZhu");

      var currWidth = myImg.clientWidth;

      var currHeight = myImg.clientHeight;

      var ProportionWidthInImg = x / currWidth;

      var ProportionHeightInImg = y / currHeight;

      this.showMen = false;

      this.createMarker(x, y)；

    },

createMarker(x, y) {

      var div = document.createElement("div");

      div.className = "marker";

      div.id = "marker" + this.banMa.length;

      y =

        y + document.querySelector("#myBiaoZhu").offsetTop - this.pointSize / 2;

      x =

        x + document.querySelector("#myBiaoZhu").offsetLeft - this.pointSize / 2;

      div.style.width = this.pointSize * 3 + "px";

      div.style.height = this.pointSize * 3 + "px";

      div.style.cursor = "pointer";

      div.style.background = "url(" + this.pointImg + ") no-repeat";

      div.style.position = "absolute";

      div.style.left = x - 12 + "px";

      div.style.top = y - 30 + "px";

        this.banMa.push({

          id: "marker" + this.banMa.length,

          x: x,

          y: y,

        });

      document.getElementById("myBiaoZhuDiv").appendChild(div);

      this.$forceUpdate()

    },

}