vue.js - VueJS:向左,元素的顶部位置?
问题描述
在转换遗留 jquery 代码时,我坚持获取元素的位置。
我的目标是显示浮动在标签 div
上方。a
这是我的模板。
<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代码如下。
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';
}
我只是使用当前鼠标指针的位置,但需要元素的绝对位置。
我的旧版 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:
<a ref = "busstop"
href="#none"
v-for="busstop in busstops"
@click = getPos(busstop)>
在您的方法对象中创建处理点击的方法:
methods: {
getPos(busstop) {
const left = this.$refs.busstop.getBoundingClientRect().left
const top = this.$refs.busstop.getBoundingClientRect().top
...
}
}
当前所有浏览器都支持: https ://caniuse.com/#feat=getboundingclientrect
更多信息在这里:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
推荐阅读
- django - “str”对象没有属性“id”django
- javascript - 滚动时背景颜色变化
- python - 将数据从 Excel 导入 Treeview 时出现问题
- html - 绑定以角度切换设置
- pdf - PDF - 为移动设备自动调整?
- swift - 根据用户位置显示自定义信息 FireStore
- python - 我在 Macbook 上的 opencv python 有这个问题
- for-loop - ansible jinja2 - 如何在其他“for语句”中使用“循环范围”输出
- python - Python:类代码有问题
- python - pdfminer.high_level 没有出现