vue3 全屏screenfull 版本错误，装5.2.0

A 「n」

已于 2022-09-21 15:40:49 修改

阅读量463

点赞数 1

分类专栏： vue3 文章标签： vue.js

于 2022-09-21 15:27:54 首次发布

本文链接：https://blog.csdn.net/weixin_43363801/article/details/126973819

版权

vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

cnpm install --save screenfull@5.2.0





import screenfull from 'screenfull'


//dom
<a-tooltip>
    <template #title>{{ isFullscreen ? '退出全屏' : '全屏展示' }}</template>
    <expand-outlined v-if="!isFullscreen" @click="handleScreenFull" />
    <compress-outlined v-else @click="handleScreenFull" />
</a-tooltip>
//


//监听
onMounted(() => {
    if(screenfull.isEnabled) {
        screenfull.on('change', fullData.changeFull)
    }
})
onUnmounted(() => {
    if(screenfull.isEnabled) {
        screenfull.off('change', fullData.changeFull)
    }
})


// 全屏
let fullData = reactive({
    isFullscreen: false,
    handleScreenFull: () => {
        if(screenfull.isEnabled) {
            screenfull.toggle();
            fullData.isFullscreen = !fullData.isFullscreen
        }
    },
    changeFull: () => {
        fullData.isFullscreen = screenfull.isFullscreen
    }
})