Vue自定義指令實現input限制輸入正整數

no-simple發表於2018-10-16
Vue

前言

種一棵樹最好的時間是十年前，其次是現在。--誰說的不重要。

明確需求

在做表單時，我們經常會遇到各種input輸入框，例如在設計填寫個數時，要求輸入正整數。

普通實現

如果只是個別輸入框，那麼我們完全可以檢測input的keyup事件，在該事件裡對keyup事件進行操作即可

    <input type="text" v-model="value" 
    @keyup="value = value.length === 1 ? value.replace(/[^1-9]/g, '') : value.replace(/\D/g, '')" />
複製程式碼

如果存在大量的要求輸入正整數，那就不好玩了

Vue自定義指令實現input限制輸入正整數

高階實現

最終效果

粉墨登場！

首先看下最終結果：

<input type="text" v-model="value" v-Int/>
複製程式碼

確認過的眼神，簡單到只需要新增指令 v-Int即可實現，是不是心動的感覺？

Vue自定義指令實現input限制輸入正整數

實現方式

  1. 新建JS檔案，程式碼如下

Vue自定義指令實現input限制輸入正整數
2. 註冊自定義指令，在main.js檔案中引入檔案，並註冊（圖中標註兩行程式碼即可）
Vue自定義指令實現input限制輸入正整數
3. 起飛，在需要的地方輸入框使用該指令即可輕鬆實現。
Vue自定義指令實現input限制輸入正整數

結語

如果把自己常用的小技能都採用自定義的方式進行維護，那豈不是美滋滋。

修正

用了一段時間後，發現一個，input的值被修改了，但vue裡顯示的還是舊值（例如輸入字母時失去焦點，值竟然沒有發生改變），這是個嚴重的bug呀...於是花了一上午找原因...找到解決方法：

import Vue from 'vue'
export default () => {
  // 針對 el-input做的限制，只能輸入正整數
  Vue.directive('Int', {
    bind: function (el) {
      const input = el.getElementsByTagName('input')[0]
      input.onkeyup = function (e) {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.replace(/[^\d]/g, '')
        }
        trigger(input, 'input')
      }
      input.onblur = function (e) {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.replace(/[^\d]/g, '')
        }
        trigger(input, 'input')
      }
    }

  })
}
/*********************************
  ** Fn: trigger
  ** Intro: 參考 https://github.com/vuejs/Discussion/issues/157#issuecomment-273301588
  ** Author: zyx
*********************************/
const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

複製程式碼

到這裡bug已經修復了。 該bug解決方法參考自：github.com/vuejs/Discu…

相關文章