How does vue listen to window height
This article introduces the knowledge of "how to monitor the window height of vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
The specific steps are as follows:
1. First, create a new html project and introduce vue into the project
Import Vue from 'vue'
two。 After introducing vue, define a data value in the project to record the window height
Data () {
Return {
ClientHeight:''
}
}
After the 3.data value is defined, use the _ window.onresize method to get the window height
Mounted () {
This.clientHeight = `${document.documentElement.clientHeight}`
Let that = this
_ window.onresize = function () {
This.clientHeight = `${document.documentElement.clientHeight}`
If (that.$refs.page) {
That.$refs.page.style.minHeight = clientHeight-100 + 'px'
}
}
}
4. Finally, after the window height is obtained, the window height can be monitored in real time by using the watch method.
Watch: {
ClientHeight () {
This.changeFixed (this.clientHeight)
}
}
This is the end of the content of "how vue monitors window height". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
