直接上代码:
<template>
<Card id="cardHeight">
<div style="width:100%;height:100%" id="fullscreen" class="layer">
<div ref="tipBtnGroup" style="position: absolute;right:33px;top:16px;width:10px;z-index: 1">
<Button-group vertical >
<i-button icon="arrow-expand" @click="handleFullScreen"></i-button>
<i-button icon="chevron-left" @click="showTip"></i-button>
</Button-group>
</div>
</div>
</Card>
</template>
export default {
data() {
return {
fullscreen:false,
}
},
methods: {
// 全屏事件
handleFullScreen(){
let element = document.getElementById("fullscreen");
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;
},
showTip() {
if (this.tip) {
this.tip = false;
this.$refs.tipBtnGroup.style="position: absolute;right:33px;top:16px;width:10px;z-index: 1";
// this.$refs.chevron.icon='chevron-left';
} else {
this.tip = true;
this.$refs.tipBtnGroup.style="position: absolute;right:292px;top:16px;width:10px;z-index: 1";
// this.$refs.chevron.icon='chevron-right';
}
}
},
}