1.安装插件
npm install screenfull --save
2.页面引入
// 全屏组件
import screenfull from 'screenfull'
3.绑定事件使用
<!-- 全屏 -->
<el-tooltip class="item" effect="dark" :content="isFullscreen ? '取消全屏' : '全屏'" placement="bottom">
<i :class="isFullscreen ? 'el-icon-full-screen head-screen-news' : 'el-icon-rank head-screen'" @click="buttoncli"></i>
</el-tooltip>
4.全屏点击事件
// 全屏
buttoncli() {
screenfull.toggle()
this.checkFull()
},
// 监控屏幕变化
checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
// 是否全屏判断
this.isFullscreen = !this.isFullscreen;
if (this.isFullscreen) {
this.$message({
message: '全屏啦',
type: 'success'
})
} else {
this.$message({
message: '取消全屏',
type: 'warning'
})
}
if (isFull === undefined) {
isFull = false;
}
return isFull;
},