锐客网

  1. 首页 > it技术 > >

[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] 多个连续修饰符的效果
文章图片

这里的效果是，当鼠标右键点击input输入框的时候会触发handleClick事件。
再看 @keyup.ctrl.right
[Vue] 多个连续修饰符的效果
文章图片

这里的效果是，当同时按住ctrl和方向键右的时候会触发handleKey事件。
@click.right.ctrl.enter
[Vue] 多个连续修饰符的效果
文章图片

这里的效果是，当同时按住ctrl和enter键且同时鼠标右键点击input的时候会触发handleKey事件。
【[Vue] 多个连续修饰符的效果】同步更新到自己的语雀
https://www.yuque.com/diracke...

    推荐阅读


    上一篇：linux之拖拽上传文件

    下一篇：在线等比数列求和计算器