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

Question

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

Answer 1

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

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