使用 Vue中的 el-dialog 组件来实现在确认保存时,您可以通过调用父组件中的方法来关闭当前弹窗和表单弹窗。
时间: 2024-03-25 07:35:41 浏览: 68
好的,下面是使用 Vue 中的 `el-dialog` 组件来实现这个功能的代码示例:
```vue
<template>
<div>
<!-- 表单弹窗 -->
<el-dialog :visible.sync="dialogVisible" title="表单" width="50%">
<el-form ref="form" :model="formData" label-width="100px">
<!-- 表单内容 -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveForm">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
formData: {},
};
},
methods: {
saveForm() {
if (this.$refs.form.validate()) {
// 验证表单是否有效
const confirmation = confirm("确定要保存表单吗?");
if (confirmation) {
// 调用父组件中的方法关闭当前弹窗和表单弹窗
this.$emit("close-form-dialog");
this.dialogVisible = false;
}
}
},
},
};
</script>
```
在上述代码中,我使用了 `el-dialog` 组件来创建一个表单弹窗,并在其上绑定了一个 `dialogVisible` 变量,用于控制弹窗的显示和隐藏。在弹窗中,我使用了一个 `el-form` 组件来包含表单内容。当用户点击保存按钮时,我首先验证表单是否有效。如果表单有效,则打开一个确认框来询问用户是否要保存表单。如果用户点击“确定”,则调用父组件中的方法来关闭当前弹窗和表单弹窗。
阅读全文