el-dialog,字带的关闭按钮再点击提交或者取消按钮时被触发,不想被触发,如何解决
时间: 2024-09-14 08:04:06 浏览: 48
在 Element UI 中,`el-dialog` 提供的关闭按钮通常会被绑定一个默认的行为,即点击该按钮会默认关闭对话框。如果你想阻止这个默认行为并仅在点击“提交”或“取消”按钮时关闭对话框,你可以这样做:
1. 首先,给对话框的关闭按钮添加一个自定义事件,例如 `custom-close`,而不是直接使用默认的 `close` 事件:
```html
<el-dialog title="标题" :visible.sync="dialogVisible" @custom-close="handleClose">
<!-- 内容 -->
<span slot="footer">
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button type="default" @click="handleCancel">取消</el-button>
</span>
</el-dialog>
```
2. 然后,在组件内部定义 `handleClose` 方法,只在接收到特定的按钮点击事件时才关闭对话框:
```javascript
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleClose() {
// 这里检查点击的是提交还是取消按钮
const clickedButton = event.target.tagName.toLowerCase();
if (clickedButton !== 'button' || !['submit', 'cancel'].includes(event.target.dataset.button)) {
// 如果不是提交或取消按钮,阻止默认关闭行为
event.preventDefault();
}
// 根据实际情况处理提交或取消操作
if (clickedButton === 'submit') {
this.submit();
} else if (clickedButton === 'cancel') {
this.cancel();
}
},
handleSubmit() {
// 实现提交操作
},
handleCancel() {
// 实现取消操作
},
}
};
```
在这个例子中,我们通过监听 `custom-close` 事件,然后判断点击的按钮标签名和数据属性 `button` 是否匹配提交或取消,如果不匹配,则阻止默认关闭行为。
现在,只有点击“提交”或“取消”按钮才会关闭对话框,而关闭按钮自身不会自动关闭。记得替换 `handleSubmit` 和 `handleCancel` 方法的内容以满足你的业务逻辑。
阅读全文