vuejs：div 元素上的 @keyup.esc 不起作用

Question

我希望当我点击位于“shadow-modal”div 上的 ESC 按钮时触发“关闭”事件，但它没有发生

vue 2.5.13，有什么想法吗？

     <template>
      <div class="shadow-modal"
         @keyup.esc="$emit('close')">
        <transition name="modal">
          <div class="modal-mask">
            <div class="modal-wrapper">
              <div class="modal-container">
                <div class="modal-header">
                  <slot name="header">
                    default header
                  </slot>
                </div>
                <div class="modal-body">
                  <slot name="body">
                    default body
                  </slot>
                </div>
                <div class="modal-footer">
                  <slot name="footer">
                    <a href="#"
                       class="btn btn--diagonal btn--blue"
                       @click="$emit('close')">Cancel</a>
                  </slot>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </template>

原文由 DmitrySemenov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然您尝试绑定键盘事件的不是输入元素，但除非您定义 tabindex，否则它们将不起作用：

 <div class="shadow-modal" @keyup.esc="$emit('close')" tabindex="0">

这是一个参考： https ://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 3.0 许可协议