vue监听游览器高度变化做内容自适应

vue监听游览器高度变化做内容自适应

data() {
	setHeight: 500,
	browserHeight : 500
},
mounted() {
 	// 进入页面时监听游览器高度变化
	window.addEventListener('resize', this.getHeight)
},
watch: {
	browserHeight: {
		// 游览器高度变化时,动态设置高度
		handler(nv) {
			this.setHeight = nv - 400 > 300 ? JSON.stringify(nv - 400) : '300'
		}
	}
},
methods: {
	getHeight() {
		// 获取浏览器高度
		this.browserHeight = window.innerHeight
	}
},
beforeRouteLeave(to, from, next) {
	// 离开页面时取消监听
	window.removeEventListener('resize', this.getHeight)
	next()
}

你可能感兴趣的:(前端,vue,js)