vue3中使用全屏组件screenfull

一.安装插件

npm install screenfull -D

二.在Screenfull.vue中写法如下

<template>
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" 
            @click="changeScreenfull"/>
</template>
<script setup>
import {ref,onMounted,onBeforeUnmount} from 'vue';
import screenfull from 'screenfull';
let isFullscreen = ref(false);
const changeScreenfull = function(){
   if (!screenfull.isEnabled) {//浏览器是否允许全屏
        this.$message({
            message: 'you browser can not work',
            type: 'warning'
        })
        return false
    }

    screenfull.toggle();//在全屏和非全屏之间切换
}
const change = () => {
    isFullscreen = screenfull.isFullscreen
}
onMounted(()=>{
   if (screenfull.isEnabled) {
        screenfull.on('change', change)//监听全屏切换或错误事件
    }
})
onBeforeUnmount(()=>{
  if (screenfull.isEnabled) {
        screenfull.off('change', change);//移除注册的事件
    }
})
</script>