element-ui中Dialog 弹框组件高度适配方案

最新推荐文章于 2024-07-18 17:17:54 发布

@lwg

最新推荐文章于 2024-07-18 17:17:54 发布

阅读量2.6k

点赞数

文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/lwg112233/article/details/121980813

版权

本文介绍如何在Element UI中实现Dialog弹框组件的高度适配，通过在工具包中添加特定代码，页面引入并绑定height，再在生命周期钩子中进行赋值来达到效果。

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

1.在工具包中添加以下代码

export function initDialogHeight() {
    let h = initLayoutInfo().height;
    let devicePixelRatio = window.devicePixelRatio; 
    let jResolutionHeight = window.screen.height;
    if (devicePixelRatio == 1) {
        if (jResolutionHeight == 600) {
            //当电脑屏幕分辨率的高度为600，缩放比例为100%时
            h = h - 120;
        } else if (jResolutionHeight == 768) {
            //当电脑屏幕分辨率的高度为768，缩放比例为100%时
            h = h - 140;
        } else if (jResolutionHeight == 720) {
            //当电脑屏幕分辨率的高度为720，缩放比例为100%时
            h = h - 140;
        } else if (jResolutionHeight == 800) {
            //当电脑屏幕分辨率的高度为800，缩放比例为100%时
            h = h - 170;
        } else if (jResolutionHeight == 864) {
            //当电脑屏幕分辨率的高度为864，缩放比例为100%时
            h = h - 160;
        } else if (jResolutionHeight == 960) {