74 lines
1.4 KiB
74 lines
1.4 KiB
1 year ago
|
<template>
|
||
|
|
<div class="Adaptation" :style="transformStyle">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "Adaptation",
|
||
|
|
props: {
|
||
|
|
defaultWidth: {
|
||
|
|
type: Number,
|
||
|
|
default: () => 1920
|
||
|
|
},
|
||
|
|
defaultHeight: {
|
||
|
|
type: Number,
|
||
|
|
default: () => 1080
|
||
|
|
}
|
||
|
|
},
|
||
|
|
provide() {
|
||
|
|
return {
|
||
|
|
adpScale: this.getScale
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
scale: {
|
||
|
|
scaleX: 1,
|
||
|
|
scaleY: 1,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
transformStyle() {
|
||
|
|
const obj = {};
|
||
|
|
|
||
|
|
obj["transform"] = `scaleX(${this.scale.scaleX}) scaleY(${this.scale.scaleY})`;
|
||
|
|
obj["width"] = this.defaultWidth + "px";
|
||
|
|
obj["height"] = this.defaultHeight + "px";
|
||
|
|
// obj.top = `calc(50% - ${(this.defaultHeight / 2) * this.scaleY}px)`;
|
||
|
|
// obj.left = `calc(50% - ${(this.defaultWidth / 2) * this.scaleX}px)`;
|
||
|
|
|
||
|
|
return obj;
|
||
|
|
},
|
||
|
|
getScale() {
|
||
|
|
return this.scale
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initScale() {
|
||
|
|
let winW = window.innerWidth;
|
||
|
|
let winH = window.innerHeight;
|
||
|
|
this.scale.scaleX = winW / this.defaultWidth;
|
||
|
|
this.scale.scaleY = winH / this.defaultHeight;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initScale();
|
||
|
|
window.addEventListener(
|
||
|
|
"resize",
|
||
|
|
_.debounce(this.initScale.bind(this), 360)
|
||
|
|
);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.Adaptation {
|
||
|
|
transition: all 0.15s linear;
|
||
|
|
position: absolute;
|
||
|
|
transform-origin: 0 0;
|
||
|
|
}
|
||
|
|
</style>
|