h5+vue监听手机屏幕旋转及判断横竖屏

mounted () {
    // 监听resize方法
    window.addEventListener("resize", this.renderResize, false)
},
beforeDestroy () {
    // 移除监听
    window.removeEventListener("resize", this.renderResize, false)
}
methods: {
    renderResize() {
        // 判断横竖屏
        let width = document.documentElement.clientWidth
        let height = document.documentElement.clientHeight
        if(width > height) {
            alert('横屏')
        }
        // 做页面适配
        // 注意:renderResize方法执行时虚拟dom尚未渲染挂载,如果要操作vue实例,最好在this.$nextTick()里进行。
    }
}

 

你可能感兴趣的:(5+,Vue)