Vue 相对于元素绝对定位

定义元素

• 定义在组件

 <a-form-item ref="gmsfhm" >
 <a-input addon-before="身份证号*" placeholder="请输入身份证号..."
      v-decorator="['gmsfhm']" disabled/>
 </a-form-item>

• 定义在元素

<img src="../../assets/default_head.png" ref="detail_img" :alt="xm" style="height: 300px;">

获取dom信息

• 组件上的获取

this.domRect = that.$refs.gmsfhm.$el.getBoundingClientRect()

• 元素上的获取

this.domRect = this.$refs.detail_img.getBoundingClientRect()

由于业务需求将domRect传递到子组件

<!-- comparison result-->
<ComparisonCanvas
  v-if="isComparison"
  :domRect="domRect"
  type="rect"
  :content="comparisonResult"
/>

子组件接收

<template>
  <div style="position: absolute;" :style="{top: top+ 'px',left:left+ 'px'}">
    
  </div>
</template>

props: {
    domRect: {}
},
mounted() {
    this.top = this.domRect.top - 80
    this.left = this.domRect.left
}