<template>
<page-header-wrapper title=" ">
<!-- 设置大屏外包裹div 这里大屏初始化不是全屏的,是嵌入在页面里,有菜单,如场景和我这里不同,可以去掉此div或者自行修改高度 -->
<div class="container" ref="container" :style="{ height: clientHeight - 168 + 'px',overflowY:'auto',overflowX:'hidden' }">
<!-- 大屏,方法对此div操作 -->
<div class="screen" ref="bigscreen">
<p class="title">自适应大屏</p>
<a-icon
type="fullscreen"
@click="fullScreen"
v-show="isFullScreen"
style="position: absolute; right: 10px; top: 10px; color: #fff; font-size: 20px"
/>
<!-- 大屏内容
......
.....
.....
-->
</div>
</div>
</page-header-wrapper
>
</template>
<script>
export default {
data() {
return {
clientHeight: document.documentElement.clientHeight || document.body.clientHeight,
isFullScreen: true,
timer: null,
scaleCoeff: 0,
baseWidth: 1920,
baseHeight: 1080,
}
},
mounted() {
let isFull =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
isFull= !!isFull;
let that = this;
document.addEventListener("fullscreenchange", () => {
that.isFullScreen = !that.isFullScreen;
});
document.addEventListener("mozfullscreenchange", () => {
that.isFullScreen = !that.isFullScreen;
});
document.addEventListener("webkitfullscreenchange", () => {
that.isFullScreen = !that.isFullScreen;
});
document.addEventListener("msfullscreenchange", () => {
that.isFullScreen = !that.isFullScreen;
});
this.calcRate()
// 改变窗口大小重新绘制
window.addEventListener('resize', this.resize)
},
created() {
window.onresize = () => {
const h = document.documentElement.clientHeight || document.body.clientHeight
this.clientHeight = h
}
},
methods: {
// 全屏操作
fullScreen() {
var el = this.$refs.bigscreen
var rfs = el.requestFullScreen || el.webkitRequestFullScreen
if (typeof rfs != 'undefined' && rfs) {
rfs.call(el)
} else if (typeof window.ActiveXObject != 'undefined') {
var wscript = new ActiveXObject('WScript.Shell')
if (wscript != null) {
wscript.SendKeys('{F11}')
}
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen()
} else if (el.oRequestFullscreen) {
el.oRequestFullscreen()
} else {
this.$message.destroy()
this.$message.warning('请更换浏览器或按F11键切换全屏')
}
},
calcRate() {
let db = this.$refs.bigscreen
if (db && this.$refs.container.offsetWidth) {
//这里是以宽为准来等比例压缩,若需求不同 可以根据代码进行修改
this.scaleCoeff = (Number(this.$refs.container.offsetWidth)/ this.baseWidth).toFixed(5)
if(this.scaleCoeff>0.60){
this.$refs.container.style.overflow="auto"
}else{
this.$refs.container.style.overflow="hidden"
}
db.style.transform = 'scale(' + this.scaleCoeff + ') translate(0%,0%)'
}
},
resize() {
this.calcRate()
},
},
}
</script>
<style lang="less" scoped>
.container {
width: 100%;
}
.screen {
// 此处很重要 需要有个固定宽高来进行压缩
width: 1920px;
height: 1080px;
background-color: rgb(18, 18, 75);
position: relative;
transform-origin: left top;
}
</style>
vue 根据屏幕大小等比例压缩大屏
最新推荐文章于 2024-06-06 15:53:07 发布