如何计算点击时位置绝对的vue组件的左侧和顶部

Question

我有两个vue组件。第一个组件是一个parrent组件，它包含隐藏的第二个组件。我删除了一些代码，使其更易于阅读。

<template>
<div class="w-full">
<table class="w-full text-center table table-result">
<tfoot>
<tr>
<td colspan="3" class="text-center">
<svg v-on:click="showSelectModal(selectModalDefaultData, $event)" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24">
<path class="heroicon-ui" d="M6.3 12.3l10-10a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-.7.3H7a1 1 0 0 1-1-1v-4a1 1 0 0 1 .3-.7zM8 16h2.59l9-9L17 4.41l-9 9V16zm10-2a1 1 0 0 1 2 0v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h6a1 1 0 0 1 0 2H4v14h14v-6z"/>
</svg>
</td>
</tr>
</tfoot>
</table>
<select-modal @close-modal="hideSelectModal" v-if="selectModal" :data="selectModalData"></select-modal>
</div>
</template>
<script>
export default {
data: () => ({
selectModal: false,
selectModalData: {},
selectModalDefaultData:  {
items: [
{
text: 'Данные доступны для редактирования',
value: 'edit'
},
{
text: 'Данные подтверждены',
value: 'confirm'
},
{
text: 'Данные опубикованы',
value: 'publish'
}
],
selected: null,
arrowLeft: true
}
}),
methods: {
showSelectModal(data, event){
if(this.selectModal === true){
this.hideSelectModal();
}else{
data.left = event.clientX;
data.top = event.clientY;
this.selectModalData = data;
this.selectModal = true;
}
},
hideSelectModal(){
this.selectModalData = [];
this.selectModal = false;
},
},
}
</script>

第二个组件具有绝对位置。它将一些数据作为输入，并将其输出到select。当我点击svg项目时(查看屏幕http://joxi.ru/MAj38WvFj4xNBr(我必须在单击的位置显示此组件。

存在SelectModal.vue代码。我还删除了一些代码。

<template>
<div class="select-modal" v-bind:style="modalPosition">
<div class="select-modal-body">
<select v-model="value" class="form-control form-select">
<option v-for="item in data.items" :value="item.value">
{{item.text}}
</option>
</select>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true
},
},
data:() => ({
value: null
}),
mounted: function () {
this.$nextTick(function () {
this.value = this.data.selected;
})
},
computed: {
modalPosition: function(){
let style = 'top: ' + this.data.left+ 'px; left: ' + this.data.top + 'px;';
return style;
}
}
}
</script>

但问题是弹出窗口显示在一个完全不同的地方。查看屏幕

http://joxi.ru/8239D0Nu9JDB8rhttp://joxi.ru/p27WDzlsKoWV52http://joxi.ru/brRa073u7JYbdA

我不太了解css，但也许这些样式将有助于解决问题

.select-modal{
position: absolute;
z-index: 1050;
padding:0;
}

我想得到一个结果http://joxi.ru/a2X45M1Sw1Deo2

Answer 1

let style = 'top: ' + this.data.left+ 'px; left: ' + this.data.top + 'px;';
return style;

====>

let style = 'top: ' + this.data.top+ 'px; left: ' + this.data.left+ 'px;';
return style;