🌏博客首页: 水香木鱼
📑文章摘要:vue2
?全屏与退出全屏
💌春波寄语:故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。
data() {
return {
isFullscreen: false,//全屏状态
}
},
methods: {
/*全屏*/
toFullOrExit() {
this.isFullscreen = !this.isFullscreen;
if (this.isFullscreen) {
this.requestFullScreen();
} else {
this.exitFullscreen();
}
},
requestFullScreen() {
let de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
},
exitFullscreen() {
let de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
},
/*END*/
}
关于svg如何使用,请参考:全网最详细的vue2引入svg详细步骤
<el-tooltip
class="item"
effect="dark"
:content="isFullscreen ? '退出全屏' : '全屏'"
placement="left">
<a
href="javascript:void(0)"
title="全屏"
class="toolbar_item back2top"
@click="toFullOrExit">
<svg-icon icon-class="quxiaoquanping" width="20px" height="20px" class="shapeHand" v-if="isFullscreen"></svg-icon>
<svg-icon icon-class="quanping" width="20px" height="20px" class="shapeHand" v-else></svg-icon>
</a>
</el-tooltip>
本篇博客文章模板唯一版权归属?春波petal