使用screenfull插件
安装:npm install --save screenfull
导入:import screenfull from "screenfull"
首页: 一定要有一个ref绑定,这里用ref=‘shcontainer’ 绑定
<template>
<div id="zonghebox" ref='shcontainer'>
//这里写页面代码
</div>
</template>
这儿是点击按钮以及方法
<el-button @click='getFullCreeen' circle>
<i class='el-icon-rank' style='color: #ffffff'></i>
</el-button>
data中 定义:
fullscreen: true,
num1: 0,
num2: 0,
//监听
watch: {
fullscreen () {
this.num1++
this.num2++
}
},
//方法
getFullCreeen(){
let me = this;
if (!screenfull.enabled) {
me.$message('您的浏览器不能全屏')
return false
}
me.fullscreen = screenfull.isFullscreen//布尔值——当前页面是否全屏
screenfull.toggle(me.$refs.shcontainer)//指定元素全屏
},