项目中有点击按钮实现全屏功能
方式一：js实现全屏
< template > < div > < a - button type = "primary" @click = "screen" > 全屏 < / a - button > < / div > < / template >
data：
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’
代码如下：
< template > < div > < a - button type = "primary" @click = "screen" > 全屏 < / a - button > < div > < / template >
data:
data ( ) { return { fullscreen : false } ; } ,
methods：
screen ( ) { // 如果不允许进入全屏，发出不允许提示 if ( ! screenfull . enabled ) { this . $message ( "您的浏览器不能全屏" ) ; return false ; } screenfull . toggle ( ) ; this . $message . success ( "全屏啦" ) ; } ,
效果图：
实用
