Question

在转换旧式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});
});

谢谢。

Answer 1

这本身不是Vue问题，而是一个JavaScript问题。现在，执行此操作的常用方法是使用element.getBoundingClientRect（）方法。您的情况是：

在您的<a>元素上创建一个引用，并以这种方法传递该引用：

<a :ref = "busstop" 
     href="#none"  
    v-for="busstop in busstops" 
    @click = getPos(busstop)>

在您的Methods对象中，创建用于处理点击的方法：

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

Answer 2

this.markInfoBusStop.markerInfoStyle.left = left + 'px';

上面没有反应。

1。使用Vue.set

See Doc

2。使用计算的

例如（您仍然需要自定义以满足您的需求。）

数据

{
 left: 200,
 top: 200,
}

方法

onMouseEnterBusStop: function(ev) {
  this.left = ev.clientX;
  this.top = ev.clientY;
}

计算

markerInfoStyle: function(){
  return {
    left: this.left + 'px',
    top: this.top + 'px'
  }
}

VueJS：在元素的左上角位置排名第一吗？

2 个答案:

1。使用Vue.set

2。使用计算的