VUE动态获取浏览器宽高,动态获取元素宽高,动态设置元素的宽高或样式
VUE动态获取浏览器宽高,动态获取元素宽高,动态设置元素的宽高或样式动态获取浏览器宽高动态获取元素宽高动态设置元素的宽高或样式动态获取浏览器宽高created(){window.addEventListener('resize', this.GetWindowInfo); //注册监听器this.GetWindowInfo() //页面创建时先调用一次},methods:{GetWindowInf
·
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>
// js
GetDomInfo() {
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'
}
更多推荐
已为社区贡献1条内容
所有评论(0)