elementui全屏遮罩层-element-ui中如何消除Dialog对话框的描边层

bendan520 elementui

2023-10-25 0 1,702 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

使用 element-ui的Dialog时，默认会有一个描边层。如果要消除描边层elementui全屏遮罩层，官方文档给出了modal属性；

modal是一个布尔值，表示是否需要描边图层；

但将modal参数设置为false并不生效；

这里官方文档也给出了提示：

当modal值为false时，请确保 append-to-body属性为true，因为Dialog使用position:relative定位。当内部描边层被移除时，对话框将遵循当前 DOM 上的祖先。节点是用来定位的，可能会出现定位问题。

由于定位问题，我们还需要将append-to body属性设置为true；

本以为事情就这样结束了，但是事情并没有那么简单。此时描边层仍然存在；

这里重点来了，我们还需要使用v-bind 命令绑定modal属性来清除描边图层；

	<el-dialog :modal="false" append-to-body="true"></el-dialog>

至此elementui全屏遮罩层，我们不仅成功去除了Dialog对话框的描边层；

<el-button type="text" @click="centerDialogVisible = true"
 >点击打开 Dialog</el-button
>
<el-dialog title="dialog去掉遮罩层" v-model="centerDialogVisible" width="30%" center  :modal="false" append-to-body="true">
  <span>注意：modal需要用v-bind指令绑定</span>
  <template #footer>
    <span class="dialog-footer">
      <el-button type="primary" @click="centerDialogVisible = false"
        >确定</el-button>
    </span>
  </template>
</el-dialog>