点击关闭Element-UI中dialog右上角的关闭图标按钮

我只想点击关闭按钮关闭弹框,不想在弹框区域外点击关闭,设置close-on-click-modal属性为false即可

el-dialog

<el-dialog
        :title="titleType == 1 ? '添加Estone系统' : '编辑Estone系统'"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="true"
        :close-on-click-modal="false"
      >
      <div>....</div>
</el-dialog>

解决了,记得点个赞给我噢,谢谢啦

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以通过设置 `show-close` 属性为 `false` 来去除 Element UI 对话框右上角关闭图标。例如: ```html <el-dialog title="对话框标题" :visible.sync="dialogVisible" :show-close="false"> <!-- 对话框内容 --> </el-dialog> ``` ### 回答2: Element UI 对话框右上角图标可以通过修改其属性来去除。具体操作如下: 1. 在对话框组件添加 `:show-close="false"` 属性,表示不显示右上角关闭图标。 例如: ```html <el-dialog :show-close="false"> <!-- 对话框内容 --> </el-dialog> ``` 2. 通过样式修改去除关闭图标。 可以通过给对话框组件的容器添加自定义类名,然后通过 CSS 样式来隐藏关闭图标。 例如: ```html <el-dialog class="custom-dialog"> <!-- 对话框内容 --> </el-dialog> ``` 然后在样式表添加如下样式: ```css .custom-dialog .el-dialog__headerbutton { display: none; } ``` 以上两种方法都可以去除 Element UI 对话框右上角图标。根据需要选择相应的方法进行实现。 ### 回答3: Element UI 对话框组件默认右上角有一个关闭图标,用于关闭对话框。如果想要去除这个默认的关闭图标,可以通过自定义样式来实现。 首先,在对话框组件上添加一个`custom-class`属性,用于自定义样式的类名。例如:`<el-dialog custom-class="no-close-icon">` 然后在 CSS 定义`.no-close-icon`类的样式,将关闭按钮的样式属性设置为`display: none;`,即隐藏关闭按钮。例如: ``` .no-close-icon .el-dialog__header .el-dialog__headerbtn { display: none; } ``` 通过以上操作,就可以实现去除 Element UI 对话框右上角图标。总结起来,就是给对话框组件添加一个自定义样式类名,并在 CSS 关闭按钮的样式设置为不显示。这样就可以达到去除关闭图标的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值