欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用screenfull實現(xiàn)全屏效果

 更新時間：2020年09月17日 16:57:14   作者：LSG199800  
這篇文章主要為大家詳細介紹了Vue使用screenfull實現(xiàn)全屏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue使用screenfull實現(xiàn)全屏的具體代碼，供大家參考，具體內(nèi)容如下

安裝

npm install --save screenfull

在需要的頁面引用

import screenfull from 'screenfull'

全屏使用

<template>
 <span @click='clickFullscreen'>全屏</span>
</template>
 
<script>
 import screenfull from 'screenfull'
 export default{
 name: 'screenfull',
 data(){
 return {
 isFullscreen: false
 }
 },
 methods:{
 clickFullscreen(){
 if (!screenfull.isEnabled) {
 this.$message({
 message: 'you browser can not work',
 type: 'warning'
 })
 return false
 }
 screenfull.toggle()
 }
 }
 }
</script>

原生實現(xiàn)方法

// 全屏事件 兼容
clickFullscreen() {
 let element = document.documentElement;
 if (this.isFullscreen) {
  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.isFullscreen= !this.isFullscreen;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論