vue 宽度自适应

最新推荐文章于 2024-10-17 15:13:59 发布

蓝妮365

最新推荐文章于 2024-10-17 15:13:59 发布

阅读量2.2k

点赞数

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

本文链接：https://blog.csdn.net/lany365/article/details/121892105

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<template>
<div class="my">
    <div class="mydiv">
        <div class="mytest" :style="testObj"></div>
        <div class="mytest" :style="testObj"></div>
        <div class="mytest" :style="testObj"></div>
    </div>
    <div class="box">
        <div class="left_box" :style="boxObj"></div>
        <div class="right_box" :style="boxObj"></div>
    </div>

</div>
</template>

<script>
    export default {
        name: "My",
        data(){
            return{
                styObj:{
                    height:''
                },
                testObj:{
                    height:''
                },
                boxObj:{
                    height:''
                },

            }
        },
        mounted(){
            //监听自适应
            window.addEventListener('resize', this.changeHeight);
            this.changeHeight();
        },
        methods:{
            changeHeight(){
                this.styObj.height=window.innerHeight+'px';
                this.testObj.height=document.documentElement.clientHeight*0.5+ 'px';
                this.boxObj.height=document.documentElement.clientHeight*0.4+ 'px';
                console.log('11',this.styObj.height)
                console.log('1122',this.testObj.height)
                console.log('333',this.boxObj.height)

            }

        },
        beforeDestroy() {
            // 移除绑定的listenResizeFn事件监听
            window.removeEventListener("resize",this.changeHeight);
        }

    }
</script>

<style scoped>
    .my{
        width:80%;
        margin: 0 auto;
        background: #ccc;

    }
    .mydiv{

        display: flex;
        justify-content: space-between;

    }
    .mytest{
        flex: 6;
        width: 24%;
        margin: 20px auto;
        background: red;
        border: 1px solid #ccc;
    }
    .box{
        display: flex;
        justify-content: space-between;

    }
    .left_box{
        flex: 18;
        background: #1989fa;
    }
    .right_box{
        flex: 6;
        background: #07c160;
    }

</style>