1、项目使用的是vue，需要全屏插件，上网找了一个screenfull.js，安装上再说

$ npm install --save screenfull

 

2、安装好后，引入项目，试了一下可以全屏，我用的chrome，IE9以下不要考虑，第一步完成

3、有可能需要监听window窗口变化，不监听暂时没遇到问题

// const _that = this;

// window.addEventListener('resize', () => {

// console.log(123123)

// })

// window.addEventListener('resize', function() {

// if (!_that.checkFull()) {

// _that.isFullscreen = false;

// }

// })

// checkFull() {

// var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;

// // to fix : false || undefined == undefined

// if (isFull === undefined) {

// isFull = false;

// }

// return isFull;

// },

4、完整代码如下：

当前页面引入 import screenfull from 'screenfull'

methods: {

nit() {

if (screenfull.enabled) {

screenfull.on('change', this.change)

}

},

change() {

this.isFullscreen = screenfull.isFullscreen

},

clickFull() {

if (!screenfull.enabled) {

this.$message({

message: 'you browser can not work',

type: 'warning'

})

return false

}

screenfull.toggle()

},

destroy() {

if (screenfull.enabled) {

screenfull.off('change', this.change)

}

}

},

mounted() {

this.init();

},

beforeDestroy() {

this.destroy();

},

完成