vue.js - Vue/Vuetify:显示/隐藏父组件的对话框。Esc 键不起作用
问题描述
我使用 vuetify 库。我想显示一个从子组件到父组件的对话框。我完成了。但是第一次打开对话框时 ESC 键不起作用。看起来我在某个地方犯了一个错误。有人能帮我吗?
父组件:
HTML 代码
<template v-slot:top>
<v-card-actions id="action">
<v-btn color="primary" dark class="mb-2" @click.stop="showDialog">
<v-icon>post_add</v-icon>Add
</v-btn>
<div class="mx-1" />
// call dialog from child component
<ItemCreationDialog
:valueDialog="valueDialog"
@updateValueDialog="updateValueDialog"
/>
</v-card-actions>
</template>
javascript代码:
<script>
import ItemCreationDialog from "./Dialog";
export default {
components: { ItemCreationDialog },
data: () => ({
search: "",
valueDialog: false,
}),
computed: {},
watch: {},
created() {},
methods: {
updateValueDialog(val) {
this.valueDialog = val;
},
showDialog() {
this.valueDialog = true;
},
},
};
</script>
子组件:
HTML 代码
<template>
<v-dialog v-model="itemCreationDialog" max-width="800px">
<v-card>
<v-card-title> </v-card-title>
<v-card-text> </v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="primary" text @click="close">Cancel</v-btn>
<v-btn color="primary" text @click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
javascript代码:
<script>
export default {
props: {
valueDialog: Boolean,
},
data: function () {
return {};
},
watch: {},
computed: {
itemCreationDialog: {
get() {
return this.valueDialog;
},
set(valueDialog) {
this.$emit("updateValueDialog", false);
},
},
},
methods: {
close() {
this.$emit("updateValueDialog", false);
},
handleOpenPopup() {},
save() {
this.$emit("updateValueDialog", false);
},
},
};
</script>
解决方案
我认为您应该将 ESC 事件添加到对话框中。就像是:
<v-dialog v-model="itemCreationDialog" max-width="800px" @keydown.esc="close">
推荐阅读
- php - 在 DOMNodeList 对象中显示空元素
- regex - 正则表达式来测试一个字符串是否包含一个短语,两边都没有额外的字母数字字符?
- autohotkey - 如何在 AHK 的屏幕上显示文本
- node.js - 数据库查询API报错构建
- python - 用Python匹配用户输入列表中的相似项目?
- tsql - 在给定日期的连续 50 天内获取日期
- java - ClassNotFoundException,怎么办?
- node.js - ./node_modules/elasticsearch/src/lib/utils.js 中的错误找不到模块:错误:无法解析 \node_modules\elasticsearch\src\lib 中的“路径”
- css - z-index 丢失直到过渡结束
- android - android的加速度计数据是否标准化到设备的中心?