vue3 全屏screenfull

后台项目需要全屏显示

npm install screenfull

在src/components里面新建一个文件夹Screenfull，里面创建一个index.vue文件

index.vue的代码如下

<template>

    <div @click="onToggle">

        <svg-icon id="guide-full" :icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />

    </div>

</template>

<script setup>

import { ref, onMounted, onUnmounted } from 'vue'

import screenfull from 'screenfull'

// 是否全屏

const isFullscreen = ref(false)

// 切换事件

const onToggle = () => {

    screenfull.toggle()

    // isFullscreen.value = !isFullscreen.value  此处也可以，但是为了使用screenfull 的  on 和 off 的方法。如以下内容

}



// 监听变化

const change = () => {

    isFullscreen.value = screenfull.isFullscreen

}

// 设置侦听器

onMounted(() => {

    screenfull.on('change', change)

})

// 删除侦听器

onUnmounted(() => {

    screenfull.off('change', change)

})

</script>

<style lang="scss" scoped></style>

然后在主页引入

<template>
    <div>
        <screenfull />
    </div>
</template>
<script setup>
import Screenfull from '@/components/Screenfull/index'
</script>