使用keyCode和条件触发Vuejs keyup事件

goqiplq2  于 2023-02-13  发布在  Vue.js
关注(0)|答案(3)|浏览(165)

我想绑定一个事件的条件和触发它只有当用户输入一个特定的键,例如,
1.我想在标签的值等于标记时绑定事件
onTagAdd($事件,索引):{}}"虚拟模型="价值"〉
onTagAdd:函数(oEvent,索引){
如果(o事件键===";"){//一些代码}}
一切如预期。
1.此外,我希望仅在以下情况下触发事件:(virtual key code = 186),因此我尝试了以下代码
onTagAdd($事件,索引):{}}"虚拟模型="价值"〉
它不工作。我已经提到vue.js documentation但是,没有得到任何变通办法。
如何做到这一点?
注:我已经消除了这种方法,因为它给我一个错误,在IE的$事件。仍然在寻找解决方案,如果有解决问题,并支持浏览器兼容性。

yfjy0ee7

yfjy0ee71#

试试这个,告诉我是否有效。

<input type="text" v-on:keyup.186="{ (label == 'Tags') ? $event => onTagAdd($event, index) : {} }"    v-model="value">
vx6bjr1n

vx6bjr1n2#

可能内联样式不支持事件类型中的键码(不确定),请尝试以下操作:

<input type="text" v-on:keyup.186="onTagAdd($event,2)"    v-model="value">

methods: {
        onTagAdd(event,index){
            // put your logic codes here
            console.info('==')
            console.info(event)
            console.info(index)
        }
    }
gcuhipw9

gcuhipw93#

这个页面对我在Vue 3中很有帮助:https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html

3.x语法#

由于KeyboardEvent.keyCode已经被弃用,Vue 3继续支持它也不再有意义。因此,现在建议对任何你想用作修饰符的键使用kebab-case名称。

<!-- Vue 3 Key Modifier on v-on -->
<input v-on:keyup.page-down="nextPage">

<!-- Matches both q and Q -->
<input v-on:keypress.q="quit">

因此,这意味着config.keyCodes现在也被弃用,将不再受支持。
TLDR:在Vue 3中,键码似乎已弃用,倾向于使用烤肉串大小写。
例如,@keyup.186将为@keyup.;

相关问题