如何阻止Vuetify的v-slider响应PageUp/PageDown按键？

你的问题出在事件类型和Vuetify的处理逻辑上：@keypress监听的事件不包含PageUp/PageDown这类按键，而且v-slider是通过keydown事件来处理按键增减的，所以之前的写法无效。

有两种针对性的解决方案：

方案1：仅阻止PageUp/PageDown触发滑块操作 #

直接在模板中针对这两个按键的keyCode绑定阻止默认行为：

<v-slider
  @keydown.33.prevent
  @keydown.34.prevent
  grow
  :hide-details="true"
  v-model="bpm"
  :max="300"
/>

这里33是PageUp的keyCode，34是PageDown的keyCode，.prevent修饰符会阻止滑块对这两个按键的默认响应，同时不影响你原有功能对这两个按键的监听（只要你的原有监听是在更高层级比如document上，事件会正常冒泡过去）。

方案2：阻止滑块响应所有按键 #

如果需要完全禁用滑块的按键交互，直接给keydown事件加.prevent修饰符：

<v-slider
  @keydown.prevent
  grow
  :hide-details="true"
  v-model="bpm"
  :max="300"
/>

补充说明 #

• 为什么@keypress无效：PageUp/PageDown属于系统按键，不会触发keypress事件，只有keydown和keyup会捕获到它们。
• Vuetify 2.6的v-slider内部是在keydown事件中处理方向键、PageUp/PageDown等按键的增减逻辑，所以必须监听keydown才能拦截。

内容的提问来源于stack exchange，提问作者thoni56