1、安裝vue-fullscreen
npm install vue-fullscreen
2、在mian.js中引用并注冊
import fullscreen from 'vue-fullscreen'
Vue.use(fullscreen)
3、點擊按鈕上綁定fullscreen方法
data中定義：fullscreenFlag：false
fullscreen() {
????// 需要全屏顯示的dom元素
????let dom = document.getElementById('指定全屏的dom元素')
????????// 調(diào)用全屏方法?????
????????this.$fullscreen.enter(dom, {?
????????????wrap: false,
????????????callback: f => {
????????????????????this.fullscreenFlag = f??????
????????????}????
????????})???
?}
全屏?xí)r彈框無法打開，點擊全屏按鈕時可以使用下面的方法：data中定義：fullscreenFlag：false
? ? fullscreen(){
? ? ? let element = document.body //全屏的dom元素 如果不設(shè)置是body很多元素顯示不出來
? ? ? let titleBar = document.getElementsByClassName('titleBar')[0] //整體頭部元素 【刷新、最小化、最大化 關(guān)閉】
? ? ? // 判斷是否已經(jīng)是全屏
? ? ? // 如果是全屏，退出
? ? ? if (this.fullscreenFlag) {
? ? ? ? titleBar.style.display = "block" //控制某些元素，非全屏狀態(tài)下顯示或修改樣式
? ? ? ? if (document.exitFullscreen) {
? ? ? ? ? document.exitFullscreen();
? ? ? ? } else if (document.webkitCancelFullScreen) {
? ? ? ? ? document.webkitCancelFullScreen();
? ? ? ? } else if (document.mozCancelFullScreen) {
? ? ? ? ? document.mozCancelFullScreen();
? ? ? ? } else if (document.msExitFullscreen) {
? ? ? ? ? document.msExitFullscreen();
? ? ? ? }
? ? ? ? console.log('已還原！');
? ? ? } else { ? ?// 否則，進(jìn)入全屏
? ? ? ? titleBar.style.display="none" //? ?控制某些元素，全屏狀態(tài)下隱藏或修改樣式
? ? ? ? if (element.requestFullscreen) {
? ? ? ? ? element.requestFullscreen();
? ? ? ? } else if (element.webkitRequestFullScreen) {
? ? ? ? ? element.webkitRequestFullScreen();
? ? ? ? } else if (element.mozRequestFullScreen) {
? ? ? ? ? element.mozRequestFullScreen();
? ? ? ? } else if (element.msRequestFullscreen) {
? ? ? ? ? // IE11
? ? ? ? ? element.msRequestFullscreen();
? ? ? ? }
? ? ? ? console.log('已全屏！');
? ? ? }
? ? ? // 改變當(dāng)前全屏狀態(tài)
? ? ? this.fullscreenFlag = !this.fullscreenFlag;
? ? },
