当前位置:首页 > 前端 > Vue.js

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

概述

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

Template Element

  1. <template>
  2. <div>
  3. <div ref="circleBox">
  4. 一个小圆圈
  5. </div>
  6. </div>
  7. </template>

关键Javascript代码如下

  1. export default Vue.extend({
  2. data () {
  3. return {
  4. circle: {
  5. left: 0,
  6. top: 0
  7. }
  8. }
  9. },
  10. mounted () {
  11. const $circle = this.$refs.circleBox
  12. this.circle.left = this.getParentLeft($circle)
  13. this.circle.top = this.getParentTop($circle)
  14. },
  15. methods: {
  16. /**
  17. * 获取顶部div的距离
  18. */
  19. getParentTop (e) {
  20. var offset = e.offsetTop
  21. if (e.offsetParent != null) {
  22. offset += this.getParentTop(e.offsetParent)
  23. }
  24. return offset
  25. },
  26. /**
  27. * 获取左侧div的距离
  28. */
  29. getParentLeft (e) {
  30. var offset = e.offsetLeft
  31. if (e.offsetParent != null) {
  32. offset += this.getParentLeft(e.offsetParent)
  33. }
  34. return offset
  35. },
  36. }
  37. })
读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部