VUE 点击按钮进入全屏模式

npm install --save screenfull      // 安装vue插件
import screenfull from 'screenfull'        // 引入vue插件
isFullscreen: false,      // true为全屏状态  ----------  页面定义变量

created() {     // 监听事件
    window.addEventListener('resize', this.onresize)
},

methods: {
    toggleFullscreen(isFscreen) {
        if (!screenfull.isEnabled) {
        console.warn('you browser can not work')
        return false
        }
        screenfull.toggle()
        this.isFullscreen = isFscreen
    },

    /**
     * 响应屏幕变化事件，给isFullscreen赋值，标识是否全屏
     * **/
    onresize(event) {
        // 利用屏幕分辨率和window对象的内高度来判断兼容IE
        let winFlag = window.innerHeight === window.screen.height

        // 利用window全屏标识来判断 -- IE无效
        let isFull = window.fullScreen || document.webkitIsFullScreen

        if (isFull === undefined) {
            this.isFullscreen = winFlag
        } else {
            this.isFullscreen = winFlag || isFull
        }
    },
}