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() {
        ......
    }
}

非全屏狀態

全屏狀態