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

效果圖： 

實用