vue怎么使用directive限制表單輸入整數(shù)、小數(shù)

這篇文章主要介紹“vue怎么使用directive限制表單輸入整數(shù)、小數(shù)”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“vue怎么使用directive限制表單輸入整數(shù)、小數(shù)”文章能幫助大家解決問題。

限制小數(shù)時可以輸入整數(shù)

1.第一種方法：

const limitPositive = Vue.directive('limitPositive', {
  update(el, {value = 0}, vnode) {  // 當(dāng)被綁定的元素插入到 DOM 中時
    let iscancel = false;
    let num = value
    const inputEvent = e => {
      if (iscancel) {
        return false;
      }
      let res = '/^\\\d*(\\\.?\\\d{0,'+num+'})/g'
      if (num) {
        e.target.value = (e.target.value.match(eval('(' + res + ')'))[0]) || null
      }else {
        e.target.value = (e.target.value.match(/^\d*/g)[0]) || null
      }

      let v = e.target.value;//為綁定的值
      vnode.data.model.callback(v);//改變虛擬節(jié)點上v-model的值
    };
    el.oninput = inputEvent;
    //解決輸入中文的問題
    el.addEventListener("compositionstart", e => {
      iscancel = true;
    });
    el.addEventListener("compositionend", e => {
      iscancel = false;
      inputEvent(e);
    });
  }
})
export { limitPositive }

使用方法

import limitPositive from '@/utils/directives.js'
v-limitPositive="1" //一位小數(shù)，數(shù)字可以改變
v-limitPositive 整數(shù)

2.第二種方法：

先建立一個num.js文件

/**
 * 設(shè)置輸入框的值,觸發(fā)input事件,改變v-model綁定的值
 * */
const setVal = (val, el, vNode) => {
  if (vNode.componentInstance) {
    // 如果是自定義組件就觸發(fā)自定義組件的input事件
    vNode.componentInstance.$emit('input', val)
  } else {
    // 如果是原生組件就觸發(fā)原生組件的input事件
    el.value = val
    el.dispatchEvent(new Event('input'))
  }
}

/**
* 參數(shù)檢查
* */
const optionCheck = (binding) => {
  // 范圍值是否為數(shù)值
  if ((binding.value.max && typeof binding.value.max !== 'number') || (binding.value.min && typeof binding.value.min !== 'number')) {
    throw new Error('范圍參數(shù)必須是數(shù)字')
  }
  // 最大最小值存在的時候判斷最大值與最小值是否相等
  if (binding.value.max === binding.value.min && typeof binding.value.max !== 'undefined' && typeof binding.value.min !== 'undefined') {
    throw new Error('最大值和最小值不能相等')
  }
}

/**
* 判斷是否為無效值
* */
const isInvalidVal = (bindValue) => {
  return bindValue === null || isNaN(Number(bindValue)) || bindValue.toString().indexOf('.') === bindValue.length - 1 || bindValue.toString().indexOf('e') !== -1
}

/**
* 處理數(shù)值范圍，如果輸入值超過最大值或最小值，將會被自動設(shè)置為邊界值
* */
const dealRange = (inputValue, binding) => {
  const bindMax = typeof binding.value.max === 'undefined' ? Infinity : binding.value.max
  const bindMin = typeof binding.value.min === 'undefined' ? -Infinity : binding.value.min
  let result = inputValue
  if (inputValue < bindMin) {
    result = bindMin
  }
  if (inputValue > bindMax) {
    result = bindMax
  }
  return result
}

/**
* 阻止輸入
* */
const preventInput = (event) => {
  if (event.preventDefault) {
    event.preventDefault()
  } else {
    event.returnValue = false
  }
}
export default {
  bind(el, binding, vNode) {
    optionCheck(binding)
    // 處理無效值
    const bindValue = vNode.data.model.value
    if (isInvalidVal(bindValue)) {
      setVal(null, el, vNode)
      return
    }

    // 處理數(shù)值范圍
    const inputVal = dealRange(bindValue, binding)
    setVal(inputVal, el, vNode)
  },
  inserted(el, binding, vNode) {
    let content
    // 按鍵按下=>只允許按照一定規(guī)則輸入 數(shù)字/小數(shù)點/減號
    el.addEventListener('keypress', e => {
      const inputKey = String.fromCharCode(typeof e.charCode === 'number' ? e.charCode : e.keyCode)
      const inputReg = /\d|\.|-/
      content = e.target.value
      /**
           * 1.輸入值不是數(shù)字、小數(shù)點、減號
           * 2.輸入框為空或只有減號，不能輸入小數(shù)點
           * 3.重復(fù)輸入小數(shù)點
           * 4.輸入框已有值，不能輸入減號
           * 5.重復(fù)輸入減號
           */
      // todo:已有值的時候，選中輸入框的所有值輸入減號‘-'，無法覆蓋輸入
      if (!inputReg.test(inputKey)) {
        preventInput(e)
      } else if (((content === '' || content === '-') && inputKey === '.')) {
        preventInput(e)
      } else if ((content.indexOf('.') !== -1 && inputKey === '.')) {
        preventInput(e)
      } else if ((content !== '' && inputKey === '-')) {
        preventInput(e)
      } else if ((content.indexOf('-') !== -1 && inputKey === '-')) {
        preventInput(e)
      }
    })
    // 按鍵彈起=>并限制最大最小
    el.addEventListener('keyup', e => {
      if (e.keyCode === 8) {
        return
      }
      // 處理無效值
      const bindValue = e.target.value
      if (bindValue === null) {
        setVal(null, el, vNode)
        return
      }

      // 處理數(shù)值范圍
      const inputVal = dealRange(bindValue, binding)
      setVal(inputVal, el, vNode)
    })
    // 失去焦點=>保留指定位小數(shù)
    el.addEventListener('focusout', e => { // 此處會在 el-input 的 @change 后執(zhí)行
      // 處理無效值
      const bindValue = e.target.value
      if (isInvalidVal(bindValue)) {
        setVal(null, el, vNode)
        return
      }

      content = parseFloat(e.target.value)
      const contentStr = String(content)
      if (contentStr.indexOf('.') >= 0 && contentStr.split('.')[1].length > binding.value.precision) {
        let arg_precision = 0// 默認(rèn)保留至整數(shù)
        if (binding.value.precision) {
          arg_precision = parseFloat(binding.value.precision)
        }
        content = content.toFixed(arg_precision)
      }
      setVal(content, el, vNode)
    })
  }
}

在index.js文件引入

import onlyNumber from './num'
const install = Vue => {
  Vue.directive('onlyNumber', onlyNumber)
}
/*
  Vue.use( plugin )
  安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。
  如果插件是一個函數(shù)，它會被作為 install 方法。install 方法調(diào)用時，會將 Vue 作為參數(shù)傳入。
  該方法需要在調(diào)用 new Vue() 之前被調(diào)用。
  當(dāng) install 方法被同一個插件多次調(diào)用，插件將只會被安裝一次。
*/

if (window.Vue) {
  window['onlyNumber'] = onlyNumber
  Vue.use(install); // eslint-disable-line
}

onlyNumber.install = install
export default onlyNumber

// 使用  例子：v-only-number="{max:100,min:0,precision:2}"

使用例子：
// 在main.js全局注入
import onlyNumber from ‘@/directive/num’
Vue.use(onlyNumber)

v-only-number=“{max:100,min:0,precision:2}”
max：最大值
min:最小值
precision：保留小數(shù)

<el-input v-model="value" v-only-number="{max:1000,min:0}" placeholder="請輸入"/>

關(guān)于“vue怎么使用directive限制表單輸入整數(shù)、小數(shù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。