el-dialog点击遮罩层关闭

在el-dialog组件中，可以通过设置属性:modal="false"来关闭点击遮罩层关闭弹窗的功能。这样，当用户点击遮罩层时，弹窗不会自动关闭。例如：

<el-dialog :visible.sync="show_form" title="添加活动" width="90%" :lock-scroll="false" :modal="false" @close="closeDialog"></el-dialog> [1]

另外，如果希望在点击弹出窗口的关闭按钮时才关闭弹窗，可以设置属性:close-on-click-modal="false"。这样，只有当用户点击关闭按钮时，弹窗才会关闭。例如：

<el-dialog :title="提示" :visible.sync="dialogVisible" @close="closeDialog" :close-on-click-modal="false">
<el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
<el-button type="success" icon="el-icon-plus" size="mini">上传</el-button>
</el-dialog> [2]

同时，如果想要将遮罩层插入到当前元素下而不是body元素上，可以设置属性:modal-append-to-body="false"。例如：

<el-dialog title="添加信息" :visible.sync="dialogFormVisible" :append-to-body="true">
<el-form :model="form">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input v-model="form.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
</div>
</el-dialog> [3]