vue 全屏放大缩小方法封装
不废话直接上代码(打卡:2020-12-24 )
一、后台管理全屏按钮
html
<div class="content_item2 plr8" @click="fullScreen">
<svg-icon style="margin-right:10px" icon-class="全屏"></svg-icon>
</div>
data
data() {
return {
isfullScreen:true,
};
},
methods
fullScreen () {
if (this.isfullScreen) {
var docElm = document.documentElement
if (docElm.requestFullscreen) {
docElm.requestFullscreen()
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen()
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen()
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen()
}
this.isfullScreen = false
} else {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
this.isfullScreen = true
}
},
提示:
写法是自己对iconfont的封装使用
iconfont封装使用
笔记:
全局挂载方法
demo预览