screenfull_Vue使用screenfull实现全屏效果

本文实例为大家分享了Vue使用screenfull实现全屏的具体代码，供大家参考，具体内容如下

安装

npm install --save screenfull

在需要的页面引用

import screenfull from 'screenfull'

全屏使用

全屏

import screenfull from 'screenfull'

export default{

name: 'screenfull',

data(){

return {

isFullscreen: false

}

},

methods:{

clickFullscreen(){

if (!screenfull.isEnabled) {

this.$message({

message: 'you browser can not work',

type: 'warning'

})

return false

}

screenfull.toggle()

}

}

}

原生实现方法

// 全屏事件 兼容

clickFullscreen() {

let element = document.documentElement;

if (this.isFullscreen) {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

} else {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.webkitRequestFullScreen) {

element.webkitRequestFullScreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.msRequestFullscreen) {

// IE11

element.msRequestFullscreen();

}

}

this.isFullscreen= !this.isFullscreen;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。