vue实现浏览器全屏以及退出全屏

1. 在src/utils/util.js中加入下面代码块

import Vue from 'vue'
const util = Vue.prototype.util = {}
// 切换全屏
util.fullScreen = function (element) {
    element = element || document.body;
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

// 退出全屏
util.exitFullscreen = function () {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}
export {
    util
}

2、在页面中使用全屏/退出全屏

<template>
    <div class="header">
         <!-- 全屏 -->
         <a v-if="fullScreenFlag" href="javascript:;" class="iconfont iconquanping" title="全屏" @click="fullScreen()"></a>
         <!-- 退出全屏 -->
         <a v-else href="javascript:;" class="iconfont icontuichuquanping1" title="退出全屏" @click="exitFullScreen()"></a>
    </div>
</template>
<script>
export default {
    data () {
        return {
            fullScreenFlag: true,
        };
    },
    methods: {
        // 全屏
        fullScreen(){
            this.fullScreenFlag = false;
            this.util.fullScreen();
        },
        // 退出全屏
        exitFullScreen() {
            this.fullScreenFlag = true;
            this.util.exitFullscreen();
        },
    },
};
</script>