大屏自适应

wcsy2018110

已于 2024-01-22 13:49:30 修改

阅读量146

点赞数

文章标签： javascript 前端 vue.js

于 2023-10-17 16:44:14 首次发布

本文链接：https://blog.csdn.net/qq_48378883/article/details/133887687

版权

本文介绍了如何使用Vue开发一个名为ScaleBox的自适应组件，通过计算窗口大小和预设宽度、高度的比例，实现页面内容的动态缩放。组件接受width和height作为props，监听窗口调整事件以保持比例同步。

摘要由CSDN通过智能技术生成

<template>

    <div

        class="ScaleBox"

        ref="ScaleBox"

        :style="{

            width: width + 'px',

            height: height + 'px',

        }"

    >

        <slot></slot>

    </div>

</template>



<script>

export default {

    name: "ScaleBox",

    props: {

        width: {

            type: Number,

            default: 1920,

        },

        height: {

            type: Number,

            default: 1080,

        },

    },

    data() {

        return {

            scale: 0,

        };

    },

    mounted() {

        this.setScale();

        window.addEventListener("resize", this.debounce(this.setScale));

    },

    methods: {

        getScale() {

            // 固定好16：9的宽高比，计算出最合适的缩放比

            const { width, height } = this;

            const wh = window.innerHeight / height;

            const ww = window.innerWidth / width;

            // console.log("1111", ww < wh ? ww : wh);

            return ww < wh ? ww : wh;

        },

        setScale() {

            // 获取到缩放比例，设置它

            this.scale = this.getScale();

            if (this.$refs.ScaleBox) {

                this.$refs.ScaleBox.style.setProperty("--scale", this.scale);

            }

        },

        debounce(fn, delay) {

            const delays = delay || 500;

            let timer;

            return function () {

                const th = this;

                const args = arguments;

                if (timer) {

                    clearTimeout(timer);

                }

                timer = setTimeout(function () {

                    timer = null;

                    fn.apply(th, args);

                }, delays);

            };

        },

    },

};

</script>



<style lang="scss">

#ScaleBox {

    --scale: 1;

}

.ScaleBox {

    overflow: hidden;

    position: absolute;

    transform: scale(var(--scale)) translate(-50%, -50%); // 用var()函数获取缩放比例

    display: flex;

    flex-direction: column;

    transform-origin: 0 0;

    left: 50%;

    top: 50%;

    transition: 0.3s;

    z-index: 999;

    // background-color: #061740;

}

</style>

// 自适应缩放组件

最后使用

import scalebox from "@/components/scalebox.vue";

Vue.component("scale-box", scalebox);

 <scale-box   :width="1920"     :height="1080"  id="save"></scale-box>