vue中如何实现点击变成全屏

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

​

方式一：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  (  "全屏啦"  )  ;  }  ,  

效果图： 

实用