VueJS:向左,元素的顶部位置? [英] VueJS: Get left, top position of element?
问题描述
在转换旧的 jquery 代码时,我一直在获取元素的位置.
我的目标是在 a
标签上方显示浮动 div
.
这是我的模板.
<div :class="['marker-info', markInfoBusStop.markerInfoActiveClass]":style="markInfoBusStop.markerInfoStyle"><p><strong>{{markInfoBusStop.busStopNo}}</strong>{{markInfoBusStop.busStopName}}</p><dl>...</dl>
Vue 代码如下.
数据:{标记信息巴士站:{busStopNo: '12345',标记信息活动类:'',标记信息样式:{左:'200px',顶部:'200px'}},...},方法: {onMouseEnterBusStop:函数(ev){让左 = ev.clientX;让顶部 = ev.clientY;this.markInfoBusStop.markerInfoActiveClass = 'active';this.markInfoBusStop.markerInfoStyle.left = left + 'px';this.markInfoBusStop.markerInfoStyle.top = top + 'px';}
我只是使用当前鼠标指针的位置,但需要元素的绝对位置.
我的旧 jquery 使用 $(this).position()
如下.
$(document).on("mouseenter", "a.marker", function() {var left = $(this).position().left;var top = $(this).position().top;$(".marker-info").stop().addClass("active").css({"left":left, "top": top});});
提前致谢.
这本身不是一个 Vue 问题,而是一个 javascript 问题.现在执行此操作的常用方法是使用 element.getBoundingClientRect() 方法.在您的情况下,这将是:
创建一个ref 在你的 <a>
元素上,并在这样的方法中传递该 ref:
在你的方法对象中创建处理点击的方法:
方法:{getPos(巴士站){const left = this.$refs.busstop.getBoundingClientRect().leftconst top = this.$refs.busstop.getBoundingClientRect().top...}}
当前所有浏览器都支持:https://caniuse.com/#feat=getboundingclientrect
更多信息在这里:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
While converting legacy jquery code, I stuck at getting position of element.
My goal is display floating div
above a
tag.
Here is my template.
<a href="#none" v-for="busstop in busstops"
:id="busstop.id"
@mouseenter="onMouseEnterBusStop"
@mouseleave="onMouseLeaveBusStop"
onclick="detailsOpen(this);">
<div :class="['marker-info', markInfoBusStop.markerInfoActiveClass]"
:style="markInfoBusStop.markerInfoStyle">
<p><strong>{{markInfoBusStop.busStopNo}}</strong>{{markInfoBusStop.busStopName}}</p>
<dl>
...
</dl>
</div>
Vue code is below.
data: {
markInfoBusStop: {
busStopNo: '12345',
markerInfoActiveClass: '',
markerInfoStyle: {
left: '200px',
top: '200px'
}
},
...
},
methods: {
onMouseEnterBusStop: function(ev) {
let left = ev.clientX;
let top = ev.clientY;
this.markInfoBusStop.markerInfoActiveClass = 'active';
this.markInfoBusStop.markerInfoStyle.left = left + 'px';
this.markInfoBusStop.markerInfoStyle.top = top + 'px';
}
I'm just using current mouse pointer's position, but need element's absolute position.
My legacy jquery is using $(this).position()
as below.
$(document).on("mouseenter", "a.marker", function() {
var left = $(this).position().left;
var top = $(this).position().top;
$(".marker-info").stop().addClass("active").css({"left":left, "top": top});
});
Thanks in advance.
This is not a Vue question per se, but more a javascript question. The common way to do this now is by using the element.getBoundingClientRect() method. In your case this would be:
Create a ref on your <a>
element and pass that ref in a method like this:
<a ref = "busstop"
href="#none"
v-for="busstop in busstops"
@click = getPos(busstop)>
In your methods object create the method to handle the click:
methods: {
getPos(busstop) {
const left = this.$refs.busstop.getBoundingClientRect().left
const top = this.$refs.busstop.getBoundingClientRect().top
...
}
}
Supported by all current browsers: https://caniuse.com/#feat=getboundingclientrect
More info here:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
这篇关于VueJS:向左,元素的顶部位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!