单击时如何计算具有绝对位置的Vue组件的左和顶部

Question

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

    <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>

第二部分具有绝对位置。 它接受一些数据作为输入并将其输出到选择项。 当我单击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/8239D0Nu9JDB8r http://joxi.ru/p27WDzlsKoWV52 http://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;