vue实现浏览器全屏模式展示

1、安装screenfull包
yarn add screenfull 或 npm install screenfull --save

2、新建ScreenFull组件：ScreenFull.vue
<template>
    <div class="screen-full">
        <div v-show="!isFullscreen" @click="handleFullScreen">全屏模式</div>
        <div v-show="isFullscreen" @click="handleFullScreen">退出全屏</div>
    </div>
</template>

<script>
import screenfull from "screenfull";  //引入依赖

export default {
    name: "ScreenFull",
    data() {
        return {
            isFullscreen: false, //是否全屏
        };
    },
    mounted() {
        this.init();
    },
    beforeDestroy() {
        this.destroy();
    },
    methods: {
        handleFullScreen() {
            if (!screenfull.isEnabled) {
                this.$message.info("您的浏览器版本过低，不支持全屏浏览");
                return false;
            }
            screenfull.toggle();
        },
        change() {
            this.isFullscreen = screenfull.isFullscreen;
        },
        init() {
            if (screenfull.isEnabled) {
                screenfull.on("change", this.change);
            }
        },
        destroy() {
            if (screenfull.isEnabled) {
                screenfull.off("change", this.change);
            }
        },
    },
};
</script>



3、在导航栏使用组件
<screen-full />  <!-- 使用组件 -->


import ScreenFull from "./ScreenFull";  //引入组件
export default {
    name: "AdminHeader",
    components: { ScreenFull },  //注册组件
    data() {
        ......
    }
}

非全屏状态

全屏状态