VUE动态获取浏览器宽高,动态获取元素宽高,动态设置元素的宽高或样式
动态获取浏览器宽高动态获取元素宽高动态设置元素的宽高或样式动态获取浏览器宽高
created(){window.addEventListener('resize', this.GetWindowInfo); //注册监听器this.GetWindowInfo() //页面创建时先调用一次},methods:{GetWindowInfo(){var width = window.innerWidth // 宽var height = window.innerHeight // 高}},destroyed(){window.removeEventListener('resize', this.GetWindowInfo)}
动态获取元素宽高
在标签中定义ref属性,用this.$refs.自定义名称.clientHeight / clientWidth去获取。但是this.$refs可能会出现undefined的问题,解决方法:- 写在method中,使用 this.$nextTick(() => {}) 等页面渲染好再调用,这样就可以了并且此方法获取的宽高不包括border的值
代码:
// html<div ref="container"></div>// jsGetDomInfo() {this.$nextTick(() => {var domWidth = this.$refs.container.clientWidth // 宽var domHeight = this.$refs.container.clientHeight // 高})}
动态设置元素的宽高或样式
<div :style="{width: width}"></div>data() {return {width: ''}},setInfo() {this.width = width - domWidth + 'px'}