首页element取消弹窗遮罩层

element取消弹窗遮罩层

时间: 2023-08-13 10:03:35 浏览: 682

react-append-to-body:React高阶组件，使您可以将组件附加到主应用之外的DOM

React高阶分量附加到主体高阶组件，使您可以将组件附加到主应用程序之外的DOM。支持React 16和React 15及以下版本，因此无论有无ReactDOM.createPortal均可使用。安装 npm i react-append-to-body --save 用 import { componentWillAppendToBody } from "react-append-to-body" ; /* Some component that you want to attach to the DOM */ function MyComponent ( { children } ) { return < div xss=removed> { children } < / div > ; } const AppendedMyComponent =

要取消Element UI的弹窗遮罩层，可以使用`modal`属性并将其绑定为`false`。同时，确保`append-to-body`属性设置为`true`。这样，遮罩层就会被移除。例如： ```html <el-dialog :modal="false" append-to-body="true">  </el-dialog> ``` 另外，如果你想要在点击按钮时打开Dialog，并且去除遮罩层，可以使用以下代码： ```html <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">  <template #footer> <span class="dialog-footer"> <el-button type="primary" @click="centerDialogVisible = false">确定</el-button> </span> </template> </el-dialog> ``` 请注意，当`modal`的值为`false`时，一定要确保`append-to-body`属性为`true`。因为Dialog使用`position: relative`定位，当外层的遮罩层被移除时，Dialog会根据当前DOM上的祖先节点来定位，可能会导致定位问题。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [去除 element-ui 中 Dialog 对话框遮罩层的方法](https://blog.csdn.net/m0_47901007/article/details/122066901)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

阅读全文