借鉴了好多个文章 ,得出的结果
需要安装一下全屏依赖
npm install --save screenfull
代码
<div>
//要全屏的元素
<div id="a" style="width:40px;height:100px;color:red"></div>
//点击按钮,上边的div全屏
<button id="b" @click="mounted"></button>
</div>
<script>
//在需要的文件中引入全屏插件
import screenfull from 'screenfull'
data(){
return{
fullscreen:false,//全屏插件
}
}
methods:{
mounted () {
const element = document.getElementById('a');//要全屏的元素
document.getElementById('b').addEventListener('click', () => { //点击的元素
if (!screenfull.isEnabled) {
this.$message({
message: '浏览器不允许全屏',
})
return false
}
screenfull.toggle(element)//要全屏的元素全屏
});
},
}
</script>