vue获取元素高度的方法

vue获取元素的高度

   <div
     ref="getHeight"
     class="block"/>

   .block {
     width: 100px;
     height: 100px;
     background: blueviolet;
     border: 2px solid pink;
     padding: 10px;
     margin: 5px;
   }

获取高度值（包括元素高度、内边距和边框）

    let height = this.$refs.getHeight.offsetHeight;

获取元素样式值 （获取样式带单位）

    let height = window.getComputedStyle(this.$refs.getHeight).height;

获取元素内联样式值（非内联样式无法获取，带单位）

      <div
        ref="getHeight"
        :style="{height: '200px'}"
        class="block"/>

    let height = this.$refs.getHeight.style.height; // 200px
    let width = this.$refs.getHeight.style.width; // 空值