全屏切换按钮：

<div @click="handleFullScreen">
    {{this.fullscreen ? '退出全屏':'全屏'}}
</div>

data() {
    return {
        fullscreen: false, // 是否全屏
        teleport: true, 
        pageOnly: false,
    };
},

解决方案一：用原生的js完成

handleFullScreen(){
    let element = document.documentElement;
    // 判断是否已经是全屏,如果是全屏，退出
    if (this.fullscreen) {
        if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    } else {
        // 否则，进入全屏
        if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
            //火狐
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
        } else if (element.requestFullscreen) {
            // w3c
            element.requestFullscreen();
        }
    }
    this.fullscreen = !this.fullscreen;
}

解决方案二：用插件vue-fullscreen完成

步骤一：先安装插件

npm install vue-fullscreen

步骤二：以api方式使用

import { api as fullscreen } from 'vue-fullscreen'

文档链接：www.npmjs.com/package/vue…

async handleFullScreen(){
    await fullscreen.toggle(
        this.$el.querySelector(".ordebox"),
        {
            teleport: this.teleport,
            callback: (isFullscreen) => {
                this.fullscreen = isFullscreen;
            },
        },
    );
    this.fullscreen = fullscreen.isFullscreen;
}