vue自定义指令 回车进入下一格
发表于:2023-03-21 |

自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。

应用场景

不知道大家是否遇到过这样的一个需求,表单输入好这一栏之后要求按下回车,自动聚焦下一栏表单元素中,这时候大概率需要使用到js,局部的js不能满足各个组件中都可能需要使用的情形,这时候就需要全局的js,但是全局的js也需要在方法中调用,这样非常的不合适,而且一个组件当中有些需要调用,有些不用调用的情况也会使得代码冗余,这时候就可以使用到自定义指令的方法来书写这个逻辑

如何书写

1.在老版本的vue2中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// main.js中
import Vue from 'vue'
// 自定义指令,实现按下enter后,光标自动跳转下一个输入框
Vue.directive('enterNextInput', {
inserted: function(el) {
el.addEventListener('keypress', function(e) {
e = e || window.event
const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
if (charcode === 13) {
const dom = document.getElementsByTagName('input')
for (let i = 0; i < dom.length; i++) {
if (dom[i] === document.activeElement) {
if (i === dom.length) {
return
}
dom[i + 1].focus()
return
}
}
}
return
})
}
})

// vue文件中
<input v-enter-next-input />

2.在vue3和新版本vue2中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// main.js中
app.directive('enterNextInput', (el, binding) => {
// 这会在 `mounted` 和 `updated` 时都调用
el.addEventListener('keypress', function(e) {
e = e || window.event
const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
if (charcode === 13) {
const dom = document.getElementsByTagName('input')
for (let i = 0; i < dom.length; i++) {
if (dom[i] === document.activeElement) {
if (i === dom.length) {
return
}
dom[i + 1].focus()
return
}
}
}
return
})
})
// vue文件中
<input v-enter-next-input />
上一篇:
人员管理小demo
下一篇:
Git clone项目时报错Permission denied (publickey).的解决方案