如何实现可重用的认证对话框

Question

我想用vuetify创建一个可重用的v-dialog，我创建了BaseModal:

<v-dialog
v-model="inputVal"
:hide-overlay="overlay"
:max-width="width"
>
<v-card>
<v-toolbar flat>
<v-btn color="black" dark icon right @click="closeModal">
<v-icon>mdi-close</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-toolbar-title id="toolbar-title">{{ title }}</v-toolbar-title>
</v-toolbar>
<v-card-title class="headline">
<!--Card Title-->
</v-card-title>
<v-card-text>
<slot name="content"></slot>
</v-card-text>
</v-card>
</v-dialog>

InputVal作为计算和dataBindingName作为道具:

computed: {
inputVal: {
get() {
return this.dataBindingName;
},
set(val) {
this.$emit("input", val);
}
}
},
props: {
dataBindingName: {
Boolean,
required: false
},}

我在另一个组件中像这样调用这个基本组件:

<modal-simple
:dataBindingName="dataBindingName"
title="Nouveau"
width="418"
>
<template v-slot:content>
<add-time-sheet-form />
</template>
</modal-simple>

我现在的问题是如何实现正确的closemmodal和如何实现一个按钮里面关闭模态和打开一个新的模态

Answer 1

第一部分． 模态组件。

注意不要使用v模型="dialog"正如这个答案中已经描述的那样，您需要将其替换为:value和@input。

此外，你不应该改变dialog这就是为什么你需要发出close-dialog事件。

<template>
<v-dialog
:value="dialog"
@input="$emit('input', $event)"
max-width="500px"
persistent
>
<v-card>
<v-card-title>
... dialog header ...
</v-card-title>
<v-card-text>
... dialog content ...
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn @click="close">
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
props: {
editedId: Number,
dialog: Boolean,
},
methods: {
close() {
this.$emit("close-dialog");
},
},
};
</script>

第2部分． 父组件。

假设你想在添加或编辑实体时使用你的组件。

需要实现两个方法:addItem和editItem打开你的对话。你还需要传递额外的实体道具(在我的例子中是editedId)，dialogprop with sync modifier和close-dialog事件处理程序，从模态组件发出。

<template>
<div>
<v-toolbar flat color="white">
<v-spacer />
<edit-modal
:edited-id="editedId"
:dialog.sync="dialog"
@close-dialog="
editedId = null;
dialog = false;
"
/>
<v-btn color="primary" dark class="mb-2" @click="addItem">
Add entity
</v-btn>
</v-toolbar>
<v-data-table :items="items" :headers="headers">
<template v-slot:item="props">
<tr>
<td>{{ props.item.name }}</td>
<td class="justify-center text-center">
<v-icon small class="mr-2" @click="editItem(props.item)">
edit
</v-icon>
</td>
</tr>
</template>
</v-data-table>
</div>
</template>
<script>
import Dialog from "./ReusableDialog";
export default {
components: {
"edit-modal": Dialog,
},
data() {
return {
items: [
... some items ...
],
headers: [
... some headers ...
],
editedId: null,
dialog: false,
};
},
methods: {
addItem() {
this.dialog = true;
},
editItem(item) {
this.editedId = item.id;
this.dialog = true;
},
},
};
</script>

第3部分． 修改模式以自动重新打开。

在这个例子中，modal组件将自动重新打开，直到editedId没有被设置。

模态组件:

...
close() {
this.$emit("close-dialog");
if (this.editedId === null) {
this.$emit("open-dialog");
}
},
...

在父组件中:

...
<edit-modal
... some props ...
@open-dialog="
editedId = 999;
dialog = true;
"
/>
...

有一个代码盒，里面有工作示例。