当我们使用Vue
进行页面开发时,常常涉及到对body
高度的设置。那么如何在Vue
中设置body
的高度呢?
最常见的方法是在App.vue
中对body
的高度进行设置。以设置body
的高度等于视口高度为例:
export default {
created () {
document.body.style.height = window.innerHeight + 'px'
}
}
注意,在这个方法中,需要在created
钩子函数里设置body
的高度。因为在此时,Vue
的实例已经创建完成且DOM
已经生成。如果在mounted
钩子函数中设置body
的高度,有可能出现页面渲染完成后才进行设置的问题。
当然,也可以使用第三方库vue-body-class
来设置body
的样式:
import Vue from 'vue'
import VueBodyClass from 'vue-body-class'
Vue.use(VueBodyClass, {
// options
classNames: {
// classNames
}
})
通过这种方式,可以在Vue
中方便地对body
进行样式设置,不需要手动操作DOM
,而且可以轻松地配置多个样式名称。
以上是在Vue
中设置body
高度的两种方法。需要注意的是,无论是使用Javascript
还是vue-body-class
,都需要在页面渲染完成时进行设置,否则可能会出现样式不正确的问题。