当用户按下键盘上的ESC键时,如何关闭在没有激活器的情况下打开的vuetify的dialog

推荐答案

@keydown.esc="dialog = false"添加到v-dialog组件

<v-dialog v-model="dialog" @keydown.esc="dialog = false"></v-dialog>

data: () => ({
  dialog: false
}),

工作示例:


此外,如果使用对话框作为自定义组件,则可能需要发出输入事件:

<template>
  <v-dialog :value="value" @keydown.esc="$emit('input')">
  ...

Vue.js相关问答推荐

具有VUE身份验证的Azure AD

Vuetify 3 改变 Select 的 colored颜色

视图中的 vue 样式不适用于 html

当try 更新 Vue 3 中的关联数组中的单个元素时,所有值都会更新

如何在Vue js 3中根据API响应替换react 值

Webpack 编译错误:TypeError: __WEBPACK_IMPORTED_MODULE_1__ … is not a function

Vuetify 复选框:如何停止点击事件?

从数据库中删除后,Vue.js $remove 不删除元素

如何在 Vuetify v-data-table 上对齐标题

Vue Table 2 - 自定义过滤器

如何在 Vue.js 中触发点击 ref

为什么我在 vue.js 中得到避免使用 JavaScript 一元运算符作为属性名称?

如何在某些路由上隐藏全局组件(例如导航栏)?

Vue.js:TypeError:无法设置只有 getter 的 # 的属性props

当 v-for 与对象的属性一起使用时,将 v-model 与复选框一起使用

如何从 v-for 创建的对象中绑定多个类?

npm run dev 和 npm run production 的区别

在 vue.js 组件中react this.props.children

从 vuex 存储访问 $vuetify 实例属性

Vue.js 显示空格(换行符)