基于vue的全屏功能实现模块

html部分
<a :class="isFullscreen === false ? 'iconfont icon-zhankai': 'iconfont icon-shousuo'" @click="screenfull()"></a>
js部分
import screenfull from 'screenfull'
data() {
return {
isFullscreen: false
}
}
mounted() {
window.onresize = () => {
// 全屏下监控是否按键了ESC
this.isFullscreen = !this.isFullscreen
}
},
methods: {
// 全屏模式
screenfull(index) {
if (screenfull.enabled) {
this.$message({
message: '您的浏览器无法进入全屏模式',
type: 'warning'
})
return false
}
screenfull.toggle()
}
}