安装
npm install screenfull
在要使用的页面中引用,调用,使用
import screenfull from “路径”
3.代码封装组件
<template>
<span @click="handleScreenFull">
<i class="el-icon-rank" v-if="screenState"></i>
<i class="el-icon-full-screen" v-else></i>
</span>
</template>
<script>
import screenfull from "screenfull"
export default {
data(){
return {
screenState:false
}
},
created(){
this.init();
},
beforeDestroy(){
if (screenfull.isEnabled) {
screenfull.off("change",this.change)
}
},
methods:{
// 注册全屏的change事件
init(){
if (screenfull.isEnabled) {
screenfull.on("change",this.change);
}
},
change(){
this.screenState=screenfull.isFullscreen
},
// 点击切换全屏
handleScreenFull(){
if (screenfull.isEnabled) {
screenfull.toggle();
} else {
this.$message.info("你的浏览器不支持全屏")
}
}
}
}
</script>
<style>
</style>