html元素全屏展示

参数传入dom对象即可，注意不是jQuery对象，Vue下兼容

           /**
             * 面板全屏展示
             */
            fullscreen: function () {
                if (this.isFullScreen) {
                    // 退出全屏
                    this.isFullScreen = false;
                    screen.exitFullscreen()
                } else {
                    // 全屏展示
                    this.isFullScreen = true;
                    let dom = this.$refs.tablePanel.$el;
                    screen.requestFullscreen(dom);
                }
            },

源码：

/* eslint-disable */
/**
 * 全屏显示封装
 *
 * @author Mr.css
 * @constructor
 */
function Screen() {
  //是否允许全屏
  let canFull = !!(document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen);

  return {
    /**
     * 是否允许全屏展示
     *
     * @returns {boolean}
     */
    canFullScreen: function () {
      return canFull;
    },
    /**
     * 退出全屏展示
     * @returns {Promise<void>}
     */
    exitFullscreen: async function () {
      if (document.exitFullscreen) {
        await document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else {
        console.info("Current browser not support dom full screen!");
      }
    },
    /**
     *
     * 全屏展示
     * @param dom 需要全屏展示的dom对象
     * @param dom
     * @returns {Promise<void>}
     */
    requestFullscreen: async function (dom) {
      if (dom.requestFullscreen) {
        await dom.requestFullscreen();
      } else if (dom.mozRequestFullScreen) {
        dom.mozRequestFullScreen();
      } else if (dom.webkitRequestFullScreen) {
        dom.webkitRequestFullScreen();
      } else if (dom.msRequestFullscreen) {
        dom.msRequestFullscreen();
      } else {
        console.info("Current browser not support dom full screen!");
      }
    }
  }
}

let screen = new Screen();
export default screen;