#vue# Obtenga la ventana del navegador y modifique dinámicamente la altura del div (con el código fuente)

<template>
<div class="nav">
    <div class="nav_list" :style="{height: height +'px'}"></div>
</div>
</template>

<script>
export default {
    data () {
        return {
            //获取浏览器可视区域高度(包含滚动条)、
            //获取浏览器可视区域高度(不包含工具栏高度)、
            //获取body的实际高度  (三个都是相同,兼容性不同的浏览器而设置的)
            height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        }
    },
    mounted() {
        window.addEventListener('resize',this.getHeight,false);
    },
    beforeDestroy() {
        window.addEventListener('resize',this.getHeight.false);
    },
    methods: {
        getHeight() {
            this.height = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
        },
    
    },
    }
</script>

<style lang= "scss" scoped>
.nav {
    .nav_list {
        background-color: pink;
    }
    
    .nav_list::-webkit-scrollbar {
        /*隐藏滚动条*/
        display: none;
    }
}
</style>

Efecto:

 

 

Supongo que te gusta

Origin blog.csdn.net/ZHENGCHUNJUN/article/details/125953956
Recomendado
Clasificación