Vue.js获取页面中某元素的绝对坐标位置

概述

Vue是javascript的一个框架，javascript能做到的，Vue里面也一样可以实现，比如指定元素的相对绝对位置坐标等信息，原理和原生js一模一样。

Template Element

<template>
    <div>
        <div ref="circleBox">
            一个小圆圈
        </div>
    </div>
</template>

关键Javascript代码如下

export default Vue.extend({
    data () {
    return {
        circle: {
            left: 0,
            top: 0
        }
    }
    },
    mounted () {
        const $circle = this.$refs.circleBox
        this.circle.left = this.getParentLeft($circle)
        this.circle.top = this.getParentTop($circle)
    },
  methods: {
    /**
     * 获取顶部div的距离
     */
    getParentTop (e) {
      var offset = e.offsetTop
      if (e.offsetParent != null) {
        offset += this.getParentTop(e.offsetParent)
      }
      return offset
    },
    /**
     * 获取左侧div的距离
     */
    getParentLeft (e) {
      var offset = e.offsetLeft
      if (e.offsetParent != null) {
        offset += this.getParentLeft(e.offsetParent)
      }
      return offset
    },
  }
})