<template>
<div class="ms-screen" ref="ms-screen" :style="msScreenStyles">
<div class="wrap" :style="wrapStyles">
<slot />
</div>
</div>
</template>
<script>
export default {
name: ‘MsScreen‘,
props: {
width: { type: Number, value: 0, default: 1920 },
height: { type: Number, value: 0, default: 1080 },
bg: { type: String, value: ‘#000‘, default: ‘#000‘ },
},
data() {
return {
screenWidth: this.width,
screenHeight: this.height,
}
},
computed: {
msScreenStyles() {
return `background: ${this.bg}`
},
wrapStyles() {
return `width: ${this.width}px;height: ${this.height}px;margin-left: ${this.marginLeft}px;transform: scale(${this.scale}, ${this.scale});`
},
marginLeft() {
return (this.screenWidth - this.width * this.scale) / 2
},
isHeight() {
return (this.width * this.screenHeight) / this.height < this.screenWidth
},
scale() {
return (this.isHeight ? this.screenHeight / this.height : this.screenWidth / this.width).toFixed(6)
},
},
mounted() {
window.onresize = () => this.setScreen()
this.setScreen()
},
methods: {
setScreen() {
this.screenWidth = this.$refs[‘ms-screen‘].offsetWidth
this.screenHeight = this.$refs[‘ms-screen‘].offsetHeight
},
},
}
</script>
<style lang="less" scoped>
.ms-screen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.wrap {
left: 0;
right: 0;
top: 0;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
transform-origin: 0 0;
}
}
</style>
