关于前端:Vue-多个连续修饰符的效果

53次阅读

共计 874 个字符,预计需要花费 3 分钟才能阅读完成。

先列举一下罕用的修饰符。
罕用的表单修饰符: .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
一般按键修饰符能够独自应用,而零碎级按键修饰符要想失效必须至多带上一个一般按键修饰符。
<input @keyup.ctrl=”handleKey”> 按 ctrl 的时候不会触发 handleKey 事件。
<input @keyup.ctrl.enter=”handleKey”> 同时按 ctrl 和 enter 的时候能力触发 handleKey 事件
<input @keyup.ctrl.tab.enter=”handleKey”> 同时按 ctrl 和 enter 或者 同时按 ctrl 和 tab 的时候能触发 handleKey 事件

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

注释
下面的修饰符大家或多或少都用过,我要阐明的是一种非凡状况
@click.right.ctrl.enter 的成果 这段语句的成果。

首先看个例子 @click.right,如下图

这里的成果是,当鼠标右键点击 input 输入框的时候会触发 handleClick 事件。

再看 @keyup.ctrl.right

这里的成果是,当同时按住 ctrl 和方向键右的时候会触发 handleKey 事件。

@click.right.ctrl.enter

这里的成果是,当同时按住 ctrl 和 enter 键且同时鼠标右键点击 input 的时候会触发 handleKey 事件。

同步更新到本人的语雀
https://www.yuque.com/diracke…

正文完
 0