单击时如何计算具有绝对位置的 vue 组件的左和上 [英] How to calculate left and top for vue component with position absolute when click
问题描述
我有 2 个 vue 组件.第一个组件是父组件，它包含隐藏的第二个组件.我删除了一些代码以使其更易于阅读.
<模板><div class="w-full"><table class="w-full text-center table table-result"><脚><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"宽度=24"高度="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 - 01-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 - 12-0 2H4a2 - 12-09-2 2-2h6a1 1 0 0 1 0 2H4v14h14v-6z"/></svg></td></tr></tfoot><select-modal @close-modal="hideSelectModal" v-if="selectModal" :data="selectModalData"></select-modal><脚本>导出默认{数据:() =>({选择模式:假，选择模态数据:{}，选择模态默认数据:{项目: [{text: 'Данные доступны для редактирования',值:'编辑'},{text: 'Данные подтверждены',值:'确认'},{text: 'Данные опубикованы',值:'发布'}],选择:空，左箭头:真}}),方法: {showSelectModal(数据，事件){if(this.selectModal === true){this.hideSelectModal();}别的{data.left = event.clientX;data.top = event.clientY;this.selectModalData = 数据；this.selectModal = true;}},隐藏选择模式(){this.selectModalData = [];this.selectModal = false;},},}
第二个组件具有绝对位置.它将一些数据作为输入并将其输出到选择.当我点击 svg 项目时(看屏幕 http://joxi.ru/MAj38WvFj4xNBr )我必须显示这个组件代替点击.
有 SelectModal.vue 代码.我也删除了一些代码.
<模板><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}}</选项></选择><脚本>导出默认{道具: {数据: {类型:对象，要求:真实},},数据:() =>({值:空}),挂载:函数(){this.$nextTick(function () {this.value = this.data.selected;})},计算:{modalPosition: 函数(){让样式 = '顶部:' + this.data.left+ 'px;左:' + this.data.top + 'px;';返回样式；}}}
但问题是弹出窗口显示在一个完全不同的地方.看屏幕
<块引用>http://joxi.ru/8239D0Nu9JDB8r http://joxi.ru/p27WDzlsKoWV52http://joxi.ru/brRa073u7JYbdA
我对css不是很了解，但也许这些样式可以帮助解决问题
.select-modal{位置:绝对；z-索引:1050；填充:0;}有我想要的结果 http://joxi.ru/a2X45M1Sw1Deo2
let style = 'top: ' + this.data.left+ 'px;左:' + this.data.top + 'px;';返回样式；====>
let style = 'top:' + this.data.top+ 'px;左:' + this.data.left+ 'px;';返回样式；I have 2 vue components. First component is a parrent component and it contains second component which is hidden. I erased some code to make it easier to read.
<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>
Second component has position absolute. It takes some data as input and outputs it to the select. When I click on svg items (look at screen http://joxi.ru/MAj38WvFj4xNBr ) I have to show this component in the place of the click.
there is SelectModal.vue code. I also erased some code.
<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>
But the probles is that pop-up is shown in a completely different place. Look at screens
http://joxi.ru/8239D0Nu9JDB8r http://joxi.ru/p27WDzlsKoWV52 http://joxi.ru/brRa073u7JYbdA
I do not know very well css, but maybe these styles will help in solving the problem
.select-modal{
position: absolute;
z-index: 1050;
padding:0;
}
there is result which I want to get http://joxi.ru/a2X45M1Sw1Deo2
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;
这篇关于单击时如何计算具有绝对位置的 vue 组件的左和上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
