vue实现全屏切换

1. 安装

npm install screenfull

2. 在要使用的页面中引用，调用，使用

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>