video-06-vue获取dom实际属性

我们在vue开发中，有时候会遇到这种情况，需要获取dom元素实际属性，来做样式调整，以此来做适配

目录

一、方法

二、代码

三、获取宽高

---

一、方法

在Vue中可以使用ref来获取一个真实的dom，也可以使用js原生，来获取dom节点

为了保险期间，所有的DOM操作建议都放在$nextTick() 方法中

二、代码

<template>
  <div class="box" ref="wrap"></div>
</template>
<script>
export default {
  mounted() {
    // 获取 DOM 元素
    this.$nextTick(()=>{
      let $ele = this.$refs.wrap
    })
  },
}
</script>
<style scoped>
  .box {
    width: 100%;
    height: 200px;
    background-color: pink;
  }
</style>

三、获取宽高

let $ele = this.$refs.wrap
// 宽
let width = $ele.offsetWidth
// 高
let height = $ele.offsetHeight