Vue/Vuetify：显示/隐藏父组件的对话框。 Esc 键不起作用

Posted 2023-02-23

【中文标题】Vue/Vuetify：显示/隐藏父组件的对话框。 Esc 键不起作用

【英文标题】：Vue/Vuetify: Showing/hiding dialog from parent component. Esc key not working

【发布时间】：2021-01-13 04:06:30

【问题描述】：

我使用 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->
    <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>

【参考方案1】：

我认为您应该在对话框中添加 ESC 事件。类似：

<v-dialog v-model="itemCreationDialog" max- @keydown.esc="close">