参考链接： https://blog.csdn.net/weixin_45753473/article/details/119893112
怎么让el-popover显示位置根据点击位置显示，以下代码优化：
要让`el-popover`的显示位置根据点击位置动态调整，可以根据点击的元素的位置动态设置`el-popover`的`reference`属性。以下是修改后的代码示例：
```vue
<template>
<div
v-loading="loading"
element-loading-text="加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0)"
>
<div class="div-currposition-title" v-if="curr_roomP">
当前容器存放位置：{{ curr_roomP }}
</div>
<div class="div-rooms">
...
<div
:key="item.roomName + row.row + col.row + colIndex"
class="position-circle"
:style="{
'background-color': col['isDeposit'] ? 'red' : 'none',
}"
@click="clickPop(col, $event)"
:ref="`bt` + item.roomName + row.row + col.row + colIndex"
></div>
...
</div>
</div>
</template>
```
```javascript
methods: {
clickPop(item, event) {
this.showPop = false;
this.activeId = item;
this.reference = event.target;
this.$nextTick(() => {
this.showPop = true;
this.$nextTick(() => {
this.$refs.pop.doShow();
});
});
}
}
```
在点击`position-circle`元素时，通过传递`$event`参数获取事件对象。在`clickPop`方法中，将`event.target`作为`reference`属性的值，即`this.reference = event.target`。这样`el-popover`会根据点击位置动态地显示在对应的位置上。