VUE3 el-dialog 铺满全屏

要使VUE3 el-dialog铺满全屏，可以使用以下样式：

<style lang="scss" scoped>
.custom_dialog {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.custom_dialog_header {
  display: flex;
  justify-content: space-between;
}

.custom_dialog_menu {
  padding: 4px 30px 0 0;
}

.custom_dialog_menu i {
  color: #909399;
  font-size: 15px;
}

.el-icon-full-screen {
  cursor: pointer;
}
</style>

然后在el-dialog标签上添加一个class名为custom_dialog即可：

<el-dialog
  class="custom_dialog"
  ...
>
...
</el-dialog>

相关问题

vue3 el-dialog的弹窗全屏

在 Vue3 中，`el-dialog` 组件来自 Element Plus UI，它是一个轻量级的基于 Vue 的 UI 框架。如果你想让 `el-dialog` 弹出窗口达到全屏模式，你可以通过设置组件的一些属性来实现。以下是基本步骤：

1. 首先，在你的 `.vue` 文件中，导入 `ElDialog` 组件：

   <template>
     <!-- ... -->
   </template>

   <script setup>
   import { ElDialog } from 'element-plus';
   </script>

2. 然后，创建一个全屏弹窗的函数，并在需要的时候打开它：

   const fullscreenModal = async () => {
     const dialogRef = ref(null);
     await dialogRef.value.open({
       width: '100%', // 设置宽度为100%，使其自适应屏幕宽度
       height: '100%', // 设置高度为100%，使其自适应屏幕高度
       modal: true, // 使用对话框模式
       showClose: false, // 关闭按钮隐藏
       lockScroll: true, // 阻止页面滚动
     });
   };

`fullscreenModal` 函数接受一个引用 `dialogRef`，用于操作 `el-dialog` 实例。

3. 在模板中，可以添加一个按钮或其他触发事件来调用这个函数：

   <button @click="fullscreenModal">全屏弹窗</button>
   <el-dialog :ref="dialogRef" />

注意，这只是一个基础示例，实际应用中可能还需要处理关闭对话框、状态管理和错误检查等问题。

vue div 全屏模式下 el-dialog 弹框 弹出层 无法显示

您可以尝试在 el-dialog 的样式中添加 z-index 属性来解决这个问题，例如：

.el-dialog__wrapper {
z-index: 9999;
}

这将确保弹出层始终处于最上层。