[Vue] 多个连续修饰符的效果

先列举一下常用的修饰符。
常用的表单修饰符: .lazy .trim .number
常用的事件修饰符: .stop .prevent .self .once .capture .native .passive
常用鼠标按钮修饰符:
.left 左键点击
.right 右键点击
.middle 中键点击

键值修饰符:
.keyCode
有别名的按键修饰符:
//普通按键修饰符
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统级按键修饰符
.ctrl
.alt
.meta
.shift
普通按键修饰符可以单独使用,而系统级按键修饰符要想生效必须至少带上一个普通按键修饰符。
按ctrl的时候不会触发handleKey事件。
同时按ctrl和enter的时候才能触发handleKey事件
同时按ctrl和enter 或者 同时按ctrl和tab的时候能触发handleKey事件

注:
可以通过全局 config.keyCodes 对象自定义按键修饰符别名:
如 Vue.config.keyCodes.f1 = 112

正文
上面的修饰符大家或多或少都用过,我要说明的是一种特殊情况
@click.right.ctrl.enter的效果 这段语句的效果。

首先看个例子 @click.right,如下图
[Vue] 多个连续修饰符的效果_第1张图片
这里的效果是,当鼠标右键点击input输入框的时候会触发handleClick事件。

再看 @keyup.ctrl.right
[Vue] 多个连续修饰符的效果_第2张图片
这里的效果是,当同时按住ctrl和方向键右的时候会触发handleKey事件。

@click.right.ctrl.enter
[Vue] 多个连续修饰符的效果_第3张图片
这里的效果是,当同时按住ctrl和enter键且同时鼠标右键点击input的时候会触发handleKey事件。

同步更新到自己的语雀
https://www.yuque.com/diracke...

你可能感兴趣的:(前端vue.js)