vue使用screenfull模拟F11实现全屏和退出全屏

①：下载组件js

npm install --save screenfull

②：在需要用到得页面引入和使用

引入

import screenfull from "screenfull";

使用：直接调用方法，会自动判断是否是全屏

screenfull.toggle();

完整代码，使用组件是Ant Design of Vue

<template>
            <!--是否全屏-->
            <a-icon :type="isFullscreen?'fullscreen-exit':'fullscreen'" class="trigger" @click="fullscreen"/>
</template>

<script>
    //引入js
    import screenfull from "screenfull";

    export default {
        name: 'GlobalHeader',
        data() {
            return {
                isFullscreen: false
            }
        },
        methods: {
            fullscreen() {
                this.isFullscreen = !this.isFullscreen
                screenfull.toggle();
            }
        }
    }
</script>

<style lang="less" scoped>
    .trigger {
        font-size: 20px;
        line-height: 64px;
        padding: 0 0 0 12px;
        cursor: pointer;
        transition: color .3s;
    }
</style>