VUE实现全屏页面展示及退出

1、在vue项���下创建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、vue页面加入全屏按钮及退出全屏按钮，功能实现如下：

         全屏       退出全屏  import Vue from "vue"; // 引入vueimport {util} from "../../util/utils"export default {  data() {    return {      //全屏设置      fullScreenFlag:true,    };  },  methods: {    //全屏    fullScreen(){      this.fullScreenFlag = false;      this.util.fullScreen();    },    //退出全屏    exitFullScreen(){      this.fullScreenFlag = true;      this.util.exitFullscreen();    }  },};