[英]Vue & Quasar - Sharing a custom dialog component
我在另一个没有任何答案的组件上查看了Reuse Quasar Dialog plugin with custom component ,我已经接近相同的问题,但我的结构化代码有点不同。 在我的父母表格上,我有
<q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
我的个人资料对话框是一个表单,它是一个简单的模板
<template>
<q-stepper
似乎如果我将组件包装在父页面上,对话框将打开但我无法传入
prevent-close
或添加一个
@hide
我需要知道对话框何时关闭以保存更改或防止关闭,除非单击按钮。 即使在父级中添加防止关闭也不起作用
<q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
如果我在 q-dialog 中创建表单,那么它就变成了对话框中的对话框,并在关闭时将 v-modal 设置为 true,父表单仍然有轻微的灰色覆盖,直到单击页面并且表单将无法打开第二次
您可以使用emit
在配置文件对话框的事件通事件,让你知道表单提交与否和使用持久性,使用户无法关闭对话框,如果点击它外面或者按ESC键; 此外,应用程序路由更改不会关闭它。
<q-btn v-if="step == 4" @click="FinishClick" color="primary" label="Finish"/>
methods: {
FinishClick() {
alert("Finish Click From Profile Dialog");
this.$emit("profile_dialog_emmit",{'MSG':'TestData'})
}
}
<profile-dialog @profile_dialog_emmit="my_fun($event)"></profile-dialog>
在父组件中。
methods:{
my_fun(data){
console.log("Assad");
alert("From Index Check Console for Data");
console.log(data)
this.showProfileForm=false;
}
}
演示 - https://codesandbox.io/s/clever-kilby-qf1gz
转到最后一步,单击完成将触发事件,您可以看到来自父组件的警报,并检查控制台以获取父组件显示的数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.