若依开发时指定el-dialog局部显示的方法

原创已于 2022-08-15 20:26:20 修改 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

于 2022-06-14 14:49:28 首次发布

本文介绍了如何在Vue.js中实例化和自定义一个el-dialog组件，包括设置其位置、宽度、交互方式以及处理遮罩层的影响。通过修改CSS样式实现绝对定位，避免遮罩层干扰其他交互，并讨论了可能需要调整的margin和width来保持界面的正常显示。

第一步实例化一个 el-dialog，最外面的div就是ei-dialog要显示的位置

<div id="dialog-box">
<el-dialog :visible.sync="changeVis" title="片区修改" width="80%" :modal-append-to-body="false">
  <el-form
     ref="form"
     :model="form"
     :rules="rules"
     size="medium"
     label-width="100px"
    >
   <el-form-item label="片区名" prop="areaNo">
      <el-input
         v-model="form.areaNo"
         placeholder="请输入修改的片区名"
         clearable
         :style="{ width: '100%' }"
       ></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer">
     <el-button @click="cancelEdit">取消</el-button>
     <el-button type="primary" @click="submitEditForm">确定</el-button>
  </div>
</el-dialog>
<div>

第二步在<style>标签里面写上：

  .el-dialog__wrapper{
    position: absolute !important;
  }
  .v-modal{
    position: absolute !important;
  }

结果如下：

要让遮罩不影响用户与其他控件进行交互，除了需要使用 :modal-append-to-body 和绝对位置以外，还可能会用到 margin，比如当需要隐藏遮罩的控件在屏幕右边时，就需要用 margin-left将遮罩向右移，使得左边不会被隐藏的遮罩层干扰其它交互。当然，还有设置好width，否则，右边的控件可能会发生形变。