自定义指令
除了 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
| import Vue from 'vue'
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 }) } })
<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
| app.directive('enterNextInput', (el, binding) => { 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 }) })
<input v-enter-next-input />
|