Vue使用screenfull实现全屏效果

(编辑:jimmy 日期: 2024/12/24 浏览:2)

本文实例为大家分享了Vue使用screenfull实现全屏的具体代码,供大家参考,具体内容如下

安装

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>

原生实现方法

// 全屏事件 兼容
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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

一句话新闻

一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?