通过scale属性控制浏览器固定缩放比

最新推荐文章于 2024-05-17 13:52:13 发布

四维虫子chenjd

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量166

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_51499501/article/details/132766524

版权

    <div id="container" ref="refName">
        <slot></slot>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps(['options'])
const refName = ref(null)
const width = ref(0)
const height = ref(0)
const originalWidth = ref(0)
const originalHeight = ref(0)

const init = () => {
    if (props.options && props.options.width && props.options.height) {
        width.value = props.options.width
        height.value = props.options.height
    } else {
        width.value = refName.value.clientWidth
        height.value = refName.value.clientHeight
    }

    if (!originalWidth.value || !originalHeight.value) {
        originalWidth.value = window.screen.width
        originalHeight.value = window.screen.height
    }
}

const updateSize = () => {
    if (width.value && height.value) {
        refName.value.style.width = `${width.value}px`
        refName.value.style.height = `${height.value}px`
        console.log(refName.value.clientWidth, refName.value.clientHeight, originalWidth.value, originalHeight.value)
    } else {
        refName.value.style.width = `${originalWidth.value}px`
        refName.value.style.height = `${originalHeight.value}px`
    }
}

const updateScale = () => {
    const currentWidth = document.body.clientWidth
    const currentHeight = document.body.clientHeight
    const realWidth = width.value || originalWidth.value
    const realHight = height.value || originalHeight.value
    const widthScale = currentWidth / realWidth, heightScale = currentHeight / realHight
    refName.value.style.transform = `scale(${widthScale}, ${heightScale})`

    console.log(realWidth, realHight, `scale(${widthScale}, ${heightScale})`)
}

const onSize = () => {
    init()
    updateScale()
}

onMounted(() => {
    init()
    updateSize()
    updateScale()

    window.addEventListener('resize', onSize)
})

onUnmounted(() => {
    window.removeEventListener('resize', onSize)
})
</script>

<style scoped lang="scss">
#container {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    transform-origin: left top;
    z-index: 999;
    width: 100%;
    height: 100%;
}
</style>