Vue獲取DOM元素的屬性值

 項目中需要做一個小彈層，如下圖：

 

我需要知道點擊元素距離頂部的值，再計算彈層的top值，如下圖：

 

在vue中如何獲取到DOM元素距離窗口頂部的值呢？

1.通過$event獲取

html：

<div class="sort-item" @click="showFilter($event)">
    {{currentFilter}}
    <div class="sort-icon">
        <i class="iconfont icon-shaixuan"></i>
    </div>
</div>

 

methods：

showFilter: function ($event) {
    this.filterShow = true;
    this.popoverShow = true;
    this.filterPosTop = $event.currentTarget.getBoundingClientRect().top;
},

 

如下圖：

 

2.通過this.$refs.***獲取

1.目標DOM定義ref值：

 

2.通過 【this.$refs.***.屬性名】 獲取相關屬性的值：