vue.js - 使用修饰符 Vuetify v-data-table 行单击事件

Question

我想要我的 vuetify 数据表上有两个单独的点击事件。
一个带有普通左键单击，一个带有附加修饰符（SHIFT / CTRL 和左键单击）。
这甚至可能吗？

这是一个带有不工作示例的代码笔：
https ://codepen.io/borsTiHD/pen/YzpVrNJ

@click="clickEvent"并且@click:row.ctrl="rowCtrlClicked"不工作。

标签： vue.jsvuetify.js

Answer 1

我用组件中的全局键事件监听器解决了我的问题。我在这里找到了一个例子：
https ://codepen.io/ryancwynar/pen/jOWoXZw

我的代码：
我设置this.registerKeyHandler(true/false)并created()beforeDestroy()

registerKeyHandler(register) {
    if (register) {
        window.addEventListener('keydown', this.keyHandler)
        window.addEventListener('keyup', this.keyHandler)
    } else {
        window.removeEventListener('keydown', this.keyHandler)
        window.removeEventListener('keyup', this.keyHandler)
    }
},
keyHandler(event) {
    if (!event.key === 'Control' && !event.key === 'Shift') return false
    if (event.key === 'Control' && event.type === 'keydown') {
        this.ctrlKeyOn = true
    } else if (event.key === 'Control' && event.type === 'keyup') {
        this.ctrlKeyOn = false
    } else if (event.key === 'Shift' && event.type === 'keydown') {
        this.shiftKeyOn = true
    } else if (event.key === 'Shift' && event.type === 'keyup') {
        this.shiftKeyOn = false
    }
},