侧边栏壁纸
博主头像
liuxy博主等级

细水长流,吃穿不愁

  • 累计撰写 28 篇文章
  • 累计创建 26 个标签
  • 累计收到 5 条评论

目 录CONTENT

文章目录
vue

Vue 相对于元素绝对定位

liuxy
2021-06-24 / 0 评论 / 3 点赞 / 295 阅读 / 200 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-08-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

定义元素

  • 定义在组件
 <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
}
3
广告 广告

评论区