安装全屏插件
npm install --save screenfull
全屏按钮绑架事件
<div class="full-screen" @click="fullScreen()">
data中绑定控制全屏开关
// 控制全屏
fullscreen: false,
添加方法:
这里全屏默认该页面所有元素全屏
// 点击全屏展示
fullScreen() {
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
},
但是也可以实现让部分元素全屏,只需在screenfull.toggle()中写入需要全屏的元素即可
有时候不需要全屏显示导航栏就需要使用部分元素全屏
// 点击全屏展示
fullScreen() {
const bodyEle = document.getElementById('data-screen')
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle(bodyEle,pickerPanel)
},
这样就实现了两种显示方法的全屏功能!