vue:动态设置div宽度、高度(动态获取屏幕可用宽度)

说明

动态获取屏幕可用宽度,并设置 div 的宽度

html

动态绑定 style

<div :style="cen_style">
</div>

定义数据

data:function(){
    return {
        cen_style:{
            width:'',
            height:'',
        }
    }
},

js代码

在 mounted 钩子函数中,加上下面代码

// 动态获取屏幕宽度
const centerWidth = window.screen.availWidth - 250*2 - 20 - 15*2
console.log("centerWidth:",centerWidth)
// 将宽度赋值
this.cen_style.width = centerWidth+"px"

// 获取屏幕高度
const centerHeight = window.screen.height
// 将高度赋值
this.cen_style.height = centerHeight + "px"

原文出处:/show_1IX6o8RBmWSQ.html