vue点击网页全屏_vue-cli点击实现全屏功能

本文实例为大家分享了vue-cli点击实现全屏功能的具体代码，供大家参考，具体内容如下

项目中有点击按钮实现全屏功能

方式一：js实现全屏

代码如下：

全屏

export default {

name: "index",

data(){

return{

fullscreen: false

}

},

methods:{

screen(){

let element = document.documentElement;

if (this.fullscreen) {

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.fullscreen = !this.fullscreen;

}

}

}

方式二：使用的是sreenfull插件，执行命令安装

npm install --save screenfull

在使用的页面正确引入：

import screenfull from ‘screenfull'

代码如下：

全屏

import screenfull from 'screenfull'

export default {

name: "home",

data() {

return {

//默认不全屏

isFullscreen: false

}

},

methods: {

screen(){

// 如果不允许进入全屏，发出不允许提示

if (!screenfull.enabled) {

this.$message('您的浏览器不能全屏');

return false

}

screenfull.toggle();

this.$message.success('全屏啦')

}

}

}

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