安裝

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) {// IE11element.msRequestFullscreen();}}this.isFullscreen= !this.isFullscreen;}

總結

以上是生活随笔為你收集整理的Vue 使用 screenfull 实现全屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。