element-ui框架的el-dialog弹出框被遮罩层挡住了

对话框附体：el-dialog修改密码流程详解

最新推荐文章于 2024-09-27 17:50:11 发布

原创最新推荐文章于 2024-09-27 17:50:11 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何在Eleme UI (Element) 的对话框组件el-dialog中添加`append-to-body=true`属性，以便于实现完整的表单交互，包括新密码输入和确认操作。适合前端开发者理解和实践。

如图：
在这里插入图片描述

解决方案

在el-dialog上加 :append-to-body="true",如下


    <el-dialog :visible.sync="dialogUserVisible" title="修改密码" :append-to-body="true">
      <el-form ref="dataForm" label-position="left" label-width="100px" >
        <el-form-item label="新密码">
          <el-input type="text" aria-placeholder="请输入新密码" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUserVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogUserVisible = false">确认</el-button>
      </span>
    </el-dialog>