在鼠标点击位置出现弹窗

需求：点击编辑在旁边出现弹窗

效果：

代码：

html:

js:

edit(e, i) {
                this.id = i.id
                this.values = i.number
                this.x = e.target.x
                this.y = e.target.y
                this.editPopShow = true //显示弹窗
            },

this.x 和 this.y是弹窗出现的坐标，这里使用了动态获取了css样式，可以参考我的另一篇文章

动态改变css值-CSDN博客

css：

.editPop {
        width: 236px;
        height: 158px;
        background: #FFFFFF;
        box-shadow: 0px 10px 20px 0px rgba(0, 14, 71, 0.1);
        border-radius: 12px;
        position: absolute;
        left: var(--x);
        top: var(--y);
    }