el-dialog 允许操作遮罩层下方的按钮
时间: 2023-07-22 11:03:36 浏览: 54
el-dialog 默认是有遮罩层的,遮罩层下面的按钮是无法操作的。如果你需要在遮罩层下方操作按钮,可以通过设置 `:lock-scroll="false"` 来禁止遮罩层滚动,这样就可以操作遮罩层下方的按钮了。
示例代码如下:
```html
<el-dialog :visible.sync="dialogVisible" :lock-scroll="false">
<span>这里是对话框内容</span>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
```
其中,`:lock-scroll="false"` 表示禁止遮罩层滚动,`handleConfirm` 是点击确定按钮后的处理函数。
相关问题
el-dialog怎么设置遮罩层
el-dialog可以通过设置v-modal属性来设置遮罩层的样式。常用的遮罩样式el-dialog可以通过设置v-modal属性来设置遮罩层的样式。常用的遮罩样式可以参考以下代码:
```
.v-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000000;
}
```
如果遮罩层失效,可以尝试将原有样式覆盖,使用以下代码来设置遮罩层的样式:
```
.vel-dialog可以通过设置v-modal属性来设置遮罩层的样式。常用的遮罩样式可以参考以下代码:
```
.v-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000000;
}
```
如果遮罩层失效,可以尝试将原有样式覆盖,使用以下代码来设置遮罩层的样式:
```
.v-modal {
background-color: rgba(0, 0, 0, 0.5);
}
```
这样就可以实现el-dialog的遮罩层效果了。
el-dialog 允许操作底部按钮
是的,el-dialog 组件允许在底部添加操作按钮。你可以通过设置 `footer-slot` 属性来实现。具体的做法是在 el-dialog 组件中添加一个具有 `slot="footer"` 的元素,然后在该元素中添加需要的按钮组件即可。例如:
```html
<el-dialog title="提示" :visible.sync="dialogVisible" :modal="false" :close-on-click-modal="false">
<span>这是一段消息</span>
<template slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="doSomething()">确定</el-button>
</template>
</el-dialog>
```
在上面的例子中,我们在 el-dialog 组件中添加了一个具有 `slot="footer"` 的 `<template>` 元素,并在其中添加了两个 el-button 组件。这样就可以在 el-dialog 底部添加操作按钮了。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)