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'
}