我们在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