Element UI 对话框固定宽度 + 遮罩层深度定制方案

Element UI 对话框固定宽度 + 遮罩层深度定制方案

核心需求

  1. 固定宽度:指定对话框为固定像素宽度(非百分比)
  2. 遮罩层控制:通过 modal 属性管理遮罩层显示
  3. 样式隔离:仅影响目标对话框,不干扰其他弹窗

实现步骤

1. 添加 custom-classmodal 属性

<el-dialog
  title="定制弹窗"
  :visible.sync="dialogVisible"
  :modal="true" 
>
  <p>内容区域p>
el-dialog>

2. 通过 CSS 穿透覆盖样式

/* 调整对话框宽度和遮罩层样式 */
::v-deep .custom-modal-dialog {
  /* 固定宽度 */
  width: 600px !important; 

  /* 遮罩层样式(需同时修改) */
  + .v-modal { 
    background-color: rgba(0, 0, 0, 0.7) !important; /* 深色遮罩 */
  }
}

/* 可选:禁用遮罩层点击关闭 */
::v-deep .custom-modal-dialog {
  .el-dialog__headerbtn {
    z-index: 2001; /* 确保关闭按钮在遮罩上层 */
  }
}

配置解析

modal 属性功能说明

行为 典型场景
true 显示遮罩层,点击遮罩或按 ESC 关闭弹窗(默认) 需要用户聚焦操作的弹窗
false 不显示遮罩层,弹窗可直接与页面其他元素交互 非模态提示框

样式控制要点

类名/选择器 作用 示例代码
.custom-modal-dialog 目标对话框根容器 width: 600px !important;
+ .v-modal 紧随其后的遮罩层元素 background-color: rgba(0,0,0,0.7) !important;
.el-dialog__headerbtn 关闭按钮(用于层级控制) z-index: 2001;

完整代码示例

<template>
  
  <el-dialog
    title="订单详情"
    :visible.sync="orderDialogVisible"
    :modal="true"
    custom-class="fixed-order-dialog"
  >
    <el-table :data="orderData">
      
    el-table>
  el-dialog>

  
  <el-dialog title="默认弹窗" :visible.sync="defaultDialogVisible">
    <p>此弹窗保持默认样式p>
  el-dialog>
template>

<style lang="scss" scoped>
/* 定制对话框样式 */
::v-deep .fixed-order-dialog {
  /* 固定宽度 */
  width: 800px !important;
  
  /* 内容区域最大高度 */
  .el-dialog__body {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* 深色遮罩层 */
  + .v-modal {
    background: rgba(0, 0, 0, 0.8) !important;
  }

  /* 标题栏样式 */
  .el-dialog__header {
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
  }
}
style>

效果对比

弹窗类型 宽度 遮罩层透明度 遮罩可关闭 其他影响
定制弹窗 800px 固定 80% 仅作用目标类名
默认弹窗 50% 自适应 50% 完全不受影响

高级配置

动态控制遮层行为

<el-dialog
  :modal="isMobile ? false : true" 
                    

你可能感兴趣的:(ui)