点击按钮全屏

// 写一个按钮  让用户手动触发 给按钮一个点击事件
<div class="fullScreenButton" @click="handleFullscreen">   
    {{fullScreen == 1 ? '全屏' : fullScreen == 2 ? '退出全屏' : "" }} 
</div>

<script>
    export default {
        data() {
            return {
                fullScreen: 1, // 标识按钮文案
            };
        },
        methods: {
            //全屏
            launchIntoFullscreen(element) {
                this.fullScreen = 2;
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            },
            // 退出全屏
            exitFullscreen() {
                this.fullScreen = 1;
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            },
            // 判断当前是否全屏
            isFullScreen() {
                return Boolean(
                    document.fullscreen ||
                        document.mozFullScreen ||
                        document.webkitIsFullScreen ||
                        document.webkitFullScreen ||
                        document.msFullScreen
                );
            },
        }

    }
</script>