第一步 实例化一个 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,否则,右边的控件可能会发生形变。