[英]Vue: How to change a button's text while a keyboard modifier is held?
Using Vue, I am trying to make a button change its behavior when the Shift key is held.使用 Vue,我试图让按钮在按住 Shift 键时改变其行为。 It was pretty easy to change the behavior of the click
event as such:像这样更改click
事件的行为非常容易:
@click.exact="goForward"
@click.shift="goBackward"
However, I am struggling with changing the text of the button to reflect this behavior.但是,我正在努力更改按钮的文本以反映这种行为。 The default text is Forward
, and I am trying to change it to Backward
when the Shift key is being held down.默认文本是Forward
,我试图在按住 Shift 键时将其更改为Backward
。
I tried to use @mouseover.shift
but it's not good enough, because it does not capture the case of mouse enters the button, then user holds shift
我尝试使用@mouseover.shift
但它不够好,因为它没有捕获mouse enters the button, then user holds shift
You can use the vue-keypress package:您可以使用vue-keypress包:
<template>
<div>
...
<button>{{ buttonText }}</button>
...
<Keypress key-event="keydown" :key-code="16" @success="buttonText = 'Backward'" />
<Keypress key-event="keyup" :key-code="16" @success="buttonText = 'Forward'" />
</div>
</template>
<script>
export default
{
data: () => ({
buttonText: 'Forward',
}),
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.