页面自适应 transform 放大或者缩小来进行实现

最新推荐文章于 2025-04-06 08:05:53 发布

壹壹得贰ぺ

最新推荐文章于 2025-04-06 08:05:53 发布

阅读量667

点赞数 2

文章标签： swift 开发语言 ios

本文链接：https://blog.youkuaiyun.com/m0_72883244/article/details/133028638

版权


<template>
    <div class="Aspecialist" id="page-view" v-resize="handleResize">
      
    </div>
</template>
<script>

export default {
  
    directives: {
        resize: {
            bind(e, binding) {
                let width = 0;
                let height = 0;
                const isReize = () => {
                    let offsetWidth = e.offsetWidth;
                    let offsetHeight = e.offsetHeight;
                    if (width !== offsetWidth || height !== offsetHeight) {
                        const value = {
                            width: offsetWidth,
                            height: offsetHeight,
                        };
                        binding.value(value);
                    }
                    width = offsetWidth;
                    height = offsetHeight;
                };
                e.__vueSetInterval__ = setInterval(isReize, 300);
            },
            unbind(e) {
                clearInterval(e.__vueSetInterval__);
            },
        },
    },

    data() {
        return {
                
            zoom: 1,

        };
    },
    created() {

      
            this.FullContainer("page-view");

    },

    methods: {
        handleResize(data) {
            this.zoom = data.width / 1920;
        },

              /**
              * 入参
              * @param id
              * @param width 自适应原始宽度，默认1920
              * @param height 自适应原始高度，默认1080
               */
        FullContainer(id, width = 1920, height = 1080) {
            document
                .getElementById(id)
                .setAttribute("style", `overflow: hidden;transform-origin: left top;`);
            document.getElementById(id).style.width = `${width}px`;
            document.getElementById(id).style.height = `${height}px`;
            this.id = id;
            this.width = width;
            this.height = height;
            this.allWidth = width;
            this.debounce(100, this.initWH(id));
            this.bindDomResizeCallback();
        },
        debounce(delay, callback) {
            let lastTime;

            return function () {
                clearTimeout(lastTime);

                const [that, args] = [this, arguments];
                lastTime = setTimeout(() => {
                    callback.apply(that, args);
                }, delay);
            };
        },


        bindDomResizeCallback() {
            window.addEventListener("resize", () => {
                this.debounce(100, this.initWH(this.id));
            });
        },

        initWH(id, resize = true) {
            return new Promise((resolve) => {
                const dom = document.getElementById(id);

                let width = dom ? dom.clientWidth : 0;
                let height = dom ? dom.clientHeight : 0;
                if (!dom) {
                    console.warn(
                        "DataV: Failed to get dom node, component rendering may be abnormal!"
                    );
                } else if (!width || !height) {
                    console.warn(
                        "DataV: Component width or height is 0px, rendering abnormality may occur!"
                    );
                }
                if (resize) this.onResize();
                resolve();
            });
        },

        onResize() {

            const { allWidth, id } = this;
            document.getElementById(id).style.transform = 
            `scale(${document.body.clientWidth / allWidth
                },${document.body.clientHeight / this.height})`;         

        },   

    },
};
</script>

<style lang="scss" scoped>
.Aspecialist{
        width:100px;
        height:100vh;
             }


</style>

讲代码放进你页面相应的地方就可以了，或许页面还需要稍微调整一下，因为这个是 1920-1080比例进行缩放的