在App.vue页面中加入以下代码即可:
- data() {
- return {
- scaleX: 1,
- scaleY: 1
- };
- },
- mounted() {
- var that = this;
- that.zoom();
- window.addEventListener('resize', () => {
- setTimeout(() => {
- that.zoom();
- }, 100);
- });
- },
- methods: {
- /**缩放 */
- zoom() {
- this.scaleX = document.body.clientWidth / 1920;
- this.scaleY = document.body.clientHeight / 1080;
- }
- },
- computed: {
- style() {
- return `transform:scale(${this.scaleX},${this.scaleY});transform-origin:top left;width:1920px;height:1080px;`;
- }
- }
根元素配置如下:
- <div id="app" :style="style">
- <router-view />
- div>
亲测有效,可能有些弹框位置会受到影响,最好是项目刚开始做的时候进行配置,不要中期才配置