vue动态获取div高度

最新推荐文章于 2024-07-26 15:59:09 发布

阿明比我厉害

最新推荐文章于 2024-07-26 15:59:09 发布

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_48971013/article/details/129403160

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue动态获取div高度


<div v-resize="resize" id="first">
	111111111111
</div>

<div id="second"></div>

<script>
	directives: {  // 使用局部注册指令的方式
	    resize: { // 指令的名称
	      bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象
	        let width = '', height = '';
	        function isReize () {
	          const style = document.defaultView.getComputedStyle(el);
	          if (width !== style.width || height !== style.height) {
	            binding.value();  // 关键
	          }
	          width = style.width;
	          height = style.height;
	        }
	        el.__vueSetInterval__ = setInterval(isReize, 300);
	      },
	      unbind (el) {
	        clearInterval(el.__vueSetInterval__);
	      }
	    }
  },
  methods:{
  	resize () {
  	  //获取第一个div高度，第二个div距离头部高度
      let height=document.getElementById("first").clientHeight
      let body=document.getElementById("second")
      body.style.marginTop=(height+50).toString()+"px"
    },
  }
</script>