Vue中screenfull全屏组件的使用-案例

Posted 2021-12-05 JackieDYH

安装

npm install --save screenfull

使用

在需要设置的页面导入

import screenfull from "screenfull";

<template>
    <div @click="toggleFullscreen">
        <a-tooltip placement="bottom">
            <template slot="title"> 全屏 </template>
            <a-icon :type="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" style="font-size: 20px" />
        </a-tooltip>
    </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
    name: 'FullScreen',
    data() {
        return {
            isFullscreen: false,
        }
    },
    methods: {
        toggleFullscreen() {
            if (!screenfull.isEnabled) {
                this.$notification.warning({
                    message: '警告',
                    description: `您的浏览器不支持全屏!`,
                })
                return false
            }
            screenfull.toggle()
            this.isFullscreen = !this.isFullscreen
        },
    },
}
</script>

版本升级的原因，需将screenfull.enabled改为screenfull.isEnabled