vue-cli点击实现全屏功能 - 行业资讯 - 肥雀云

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

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

<强>方式一: js实现全屏

代码如下:

　　　　　　& lt; template> 　　& lt; div> 　　& lt;一个按钮类型=爸鳌盄click=捌聊弧钡脑谌? lt;/a-button> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　出口默认{ 　　名称:“指数”, 　　数据(){ 　　返回{ 　　全屏:假　　} 　　}，　　方法:{ 　　屏幕(){ 　　让元素=document.documentElement; 　　如果(this.fullscreen) { 　　如果(document.exitFullscreen) { 　　document.exitFullscreen (); 　　}else if (document.webkitCancelFullScreen) { 　　document.webkitCancelFullScreen (); 　　}else if (document.mozCancelFullScreen) { 　　document.mozCancelFullScreen (); 　　}else if (document.msExitFullscreen) { 　　document.msExitFullscreen (); 　　} 　　其他}{ 　　如果(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; 　　} 　　} 　　} 　　& lt;/script> 　　　　& lt; scoped>风格; 　　　　& lt;/style> 　　　　

<强>方式二:使用的是sreenfull插件,执行命令安装

　　
npm安装,节省screenfull
　　　　
在使用的页面正确引入:
　　
　　
进口screenfull screenfull”
　　　　
代码如下:
　　　　　　& lt; template> 　　& lt; div> 　　& lt;一个按钮类型=爸鳌盄click=捌聊弧钡脑谌? lt;/a-button> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　从“screenfull”进口screenfull 　　出口默认{ 　　名称:“家”, 　　数据(){ 　　返回{//默认不全屏　　isFullscreen:假　　} 　　}，　　　　方法:{ 　　屏幕(){//如果不允许进入全屏,发出不允许提示　　如果(! screenfull.enabled) { 　　美元。消息(“您的浏览器不能全屏”); 　　返回假　　} 　　screenfull.toggle (); 　　message.success美元。(“全屏啦”) 　　} 　　} 　　} 　　& lt;/script> 　　　　& lt; scoped>风格; 　　　　& lt;/style> 　　　　
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
vue-cli点击实现全屏功能