vue3 大屏可视化方案，伸缩布局

风中凌乱的L

已于 2024-08-22 11:20:05 修改

阅读量467

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2024-08-22 11:19:38 首次发布

本文链接：https://blog.csdn.net/m0_59203969/article/details/141423490

vue 专栏收录该内容

7 篇文章

订阅专栏

<template>
    <div ref="layoutRef" class="container">
        F12自定义窗口查看效果
    </div>
</template>
<script setup>
const BASE_WIDTH = 1920
const BASE_HEIGHT = 1080

import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
/* 缩放 Start */
const layoutRef = ref(null)
const baseWidth = ref(BASE_WIDTH)
const baseHeight = ref(BASE_HEIGHT)
const getScale = () => {
    const ww = window.innerWidth / BASE_WIDTH
    const wh = window.innerHeight / BASE_HEIGHT
    return ww < wh ? ww : wh
}
const resize = () => {
    const _scale = getScale()
    if (layoutRef.value) {
        layoutRef.value.style.cssText = `width: ${baseWidth.value}px; height: ${baseHeight.value}px; transform: scale(${_scale}) translate(-50%, -50%); transform-origin: left top;`
    }
}
onMounted(async () => {
    await nextTick()
    resize()
    window.addEventListener('resize', resize)
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', resize)
})
</script>
<style scoped>
.container {
    border: 2px solid teal;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: left top;
    transform: translate(-50%, -50%);
}
</style>