el-dialog 弹出层实现没有蒙层后底部可点击输入

2024-01-28 12:12:41

前言

el-dialog 是 Element UI 中常用的弹出层组件，它可以轻松实现各种弹出层效果。在某些场景下，我们可能需要实现一个没有蒙层、底部可点击输入的弹出层。本文将介绍如何使用 el-dialog 实现这一效果。

实现步骤

1. 安装 Element UI

首先，我们需要安装 Element UI。我们可以通过以下命令安装：

npm install element-ui

2. 导入 el-dialog 组件

在需要使用 el-dialog 组件的 Vue 文件中，我们需要导入该组件：

import { ElDialog } from 'element-ui';

3. 使用 el-dialog 组件

在 Vue 模板中，我们可以使用 el-dialog 组件来创建弹出层：

<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body>
  <div class="dialog-content">
    ...
  </div>
</el-dialog>

其中，dialogVisible 是一个布尔值，用于控制弹出层的显示和隐藏。close-on-click-modal 是一个布尔值，用于控制是否点击蒙层关闭弹出层。append-to-body 是一个布尔值，用于控制是否将弹出层追加到 body 元素。

4. 自定义蒙层样式

默认情况下，el-dialog 组件会显示一个蒙层。我们可以通过自定义蒙层样式来实现没有蒙层的效果。我们可以使用以下 CSS 代码来自定义蒙层样式：

.el-dialog__mask {
  background-color: transparent !important;
}

5. 实现底部可点击输入

默认情况下，el-dialog 组件的底部是不可点击的。我们可以通过以下 CSS 代码来实现底部可点击输入：

.el-dialog__footer {
  pointer-events: auto !important;
}

6. 完整代码

以下是一个完整的示例代码：

<template>
  <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body>
    <div class="dialog-content">
      ...
    </div>
  </el-dialog>
</template>

<script>
import { ElDialog } from 'element-ui';

export default {
  components: { ElDialog },
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

<style>
.el-dialog__mask {
  background-color: transparent !important;
}

.el-dialog__footer {
  pointer-events: auto !important;
}
</style>