Vue2 网页在点击的位置上生成元素

1.编写基本元素结构

设置好父元素的ref，方便获取dom。

设置父元素为相对定位。

<div ref="point_container" @click="handleMouseClick($event)">
     
</div>

.point_container{
    margin: 20px auto;
    position: relative;
}

2.编写@click时间函数

使用@Click自带的参数e.x与e.y获取鼠标根据视口左上角位置的坐标。

使用 getBoundingClientRect()方法获取某dom元素的左上角根据视口左上角的坐标。

使用两者的坐标相减即可得到鼠标相对于选中元素左上角的坐标。

使用document的createElement即可生成元素，设置元素为绝对定位。

handleMouseClick(e) {
    const rect = point_container.getBoundingClientRect();  //获取元素左上角坐标
    var nowPointIndex = this.pointIndex++; //在Vue的data内的变量，用来区分point
    var point = document.createElement("div");  //创建div
    point.className = "point";
    point.id = "point" + nowPointIndex;
    point.style.width = "20px";
    point.style.height = "20px";
    point.style.backgroundColor = "red";
    point.style.top = Math.floor(e.y-rect.y)-10 + "px";  //向内偏移自身一半的大小
    point.style.left = Math.floor(e.x-rect.x)-10 + "px";
    point.style.position = "absolute";
    point.style.borderRadius = "50%";
    point.style.color = "#fff";
    point.style.padding = "auto auto"
    point.style.lineHeight = "20px" 
    point.innerHTML = nowPointIndex;
    var point_container = this.$refs.point_container;
    point_container.appendChild(point);
}

3.测试效果

打开浏览器点击元素位置就可以生成一个红点元素。