vue实现图片或div中打点

    有个新需求是要在一段监控上标记监控对象的位置，其实就是在一个蒙层盒子上打点。原理很简单，就是建立xy坐标轴，然后根据点击点的xy坐标位置创建相应的元素，还有点击删除的功能。动图效果如下：

废话不多说，上代码：

<template>
    <div class="point">
        <div class="mongolia" id="mongolia" @click.stop="creat_point">
            <div class="marker" v-for="(item,index) in markerArr"
                :key="index" :style="{left:item.x,top:item.y}" 
                @click.stop="del_poit(index)">
            </div>
         </div>
    </div>
</template>
<script>
export default {
    name:'point',
    props:{    },
    data(){
        return{
           markerArr:[]
         }
    },
    methods:{
        // 打点 
       creat_point(e){
            e = e || window.event;
            let x = e.offsetX || e.layerX;
            let y = e.offsetY || e.layerY;
            let obj = {
                x:x + 'px',
                y:y + 'px',
            }
            this.markerArr.push(obj);
        },
        // 删除点
        del_poit(index){
            this.markerArr.splice(index,1);
        },
    }
}
</script>
<style lang="less" scoped>
.point{
    width: 500px;
    height: 400px;
    .mongolia{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        position:relative;
        .marker{
            width: 10px;
            height: 10px; 
            position: absolute;
            background:red;
        }
    }
}
</style>

git地址：https://github.com/aicai0/test_components.git

如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏

及时获取更多姿势，请您关注！！！