1. 程式人生 > 實用技巧 >vue 自定義指令集合

vue 自定義指令集合

// 帶小數點的數字
  Vue.directive('number', {
    inserted: function(el) {
      const input = el
      // 鍵盤按鍵被鬆開時,清除資料
      input.onkeyup = function(e) {
        var val = input.value
        if (!val) {
          return
        }
        val = val.replace(/[^\d\.]/g, '')
        // 除了第一個點 . 外,其他直接替換掉
        var
index = val.indexOf('.') if (index !== -1) { var d = val.substring(0, index) var n = (val.substring(index + 1)).replace(/\./g, '') val = d + '.' + n } if (input.value !== val) { input.value = val } } // 失去焦點時清理資料 input.onblur = function
(e) { var val = input.value if (!val) { return } val = val.replace(/[^\d\.]/g, '') // 除了第一個點 . 外,其他直接替換掉 var index = val.indexOf('.') if (index !== -1) { var d = val.substring(0, index) var n = (val.substring(index + 1)).replace(/\./g, '') val
= d + '.' + n } if (input.value !== val) { input.value = val } } } }) // 英文或者數字 Vue.directive('word', { inserted: function(el) { const input = el // 鍵盤按鍵被鬆開時,清除資料 input.onkeyup = function(e) { var _value = input.value if (_value == null) { return } var _result = _value.replace(/\W/g, '').replace('_', '') if (_value !== _result) { input.value = _result } } // 失去焦點時清理資料 input.onblur = function(e) { var _value = input.value if (_value == null) { return } var _result = _value.replace(/\W/g, '').replace('_', '') if (_value !== _result) { input.value = _result } } } }) // 0~9數字 Vue.directive('digits', { inserted: function(el) { const input = el.getElementsByTagName('input')[0] if(input){ // 鍵盤按鍵被鬆開時,清除資料 input.onkeyup = function(e) { var _value = input.value if (_value == null || _value == 0 || _value == '') { input.value = '' return } var _result = _value.replace(/\D/g, '').replace('_', '') if (_value !== _result) { input.value = _result } } // 失去焦點時清理資料 input.onblur = function(e) { var _value = input.value if (_value == null || _value == 0 || _value == '') { input.value = '' return } var _result = _value.replace(/\D/g, '').replace('_', '') if (_value !== _result) { input.value = _result } } } } }) // 只能輸入數字 Vue.directive('inputNum', function(el, binding){ el = el || window.event var input = el.getElementsByTagName('input')[0] if(input){ input.onkeyup = function() { var val = input.value var modifiersObj = binding.modifiers if(modifiersObj.chart){ input.value = val.replace(/[^0-9a-zA-Z]/g, '') // 呼叫input事件使vue v-model繫結更新,下面相同 input.dispatchEvent(new Event("input")) return } input.value = val.replace(/[^0-9]/g, '') } } }) // 1~9數字 位置碼的驗證 Vue.directive('validPosCode', { inserted: function(el) { el = el || window.event var input = el.getElementsByTagName('input')[0] if(input){ input.onkeyup = function() { var val = input.value input.value = val.replace(/[^0-9]/g, '') } } } }) // 電梯註冊碼的指令 0-32位字元,中文算一個字元 Vue.directive('inputRegist',function(el){ el = el || window.event var input = el.getElementsByTagName('input')[0] if(input){ input.onkeyup = function() { var val = input.value var regx = /^[\u4e00-\u9fa50-9a-zA-Z]{0,32}$/; // 呼叫input事件使vue v-model繫結更新,下面相同 if(regx.test(val)){ }else { input.value = val.replace(/[^\u4e00-\u9fa50-9a-zA-z]/g, '') input.value = input.value.substring(0, 32) } input.dispatchEvent(new Event("input")) } } })