微信小程序版本更新提示

自定义指令

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

应用场景

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

如何书写

1.在老版本的vue2中

// 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中

// 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 />