Реализовать поле ввода Ограничение ввода ввода в Vue

Vue.js
Реализовать поле ввода Ограничение ввода ввода в Vue

В процессе разработки мы в основном сталкивались с ситуациями, когда необходимо ограничить ввод, например, количество, можно вводить только буквенно-цифровые символы и десятичные знаки и т. д. Я искал много методов в Интернете и столкнулся с некоторыми подводными камнями, поэтому я делюсь их.

1. Используйте модификаторы для числового ввода

В Vue вы можете добавить модификаторы после V-модального для ограничения ввода, например:

<input v-model.number="testValue" type="number">

.number может обеспечить ввод ограниченного числа, но будут следующие проблемы:

  • Будет type="number" со своим стилем, который, конечно, можно очистить, добавив следующий css
/* 普通IE浏览器 样式清除 */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
}
/* 火狐浏览器样式清除 */
input[type="number"]{
  -moz-appearance:textfield;
}
  • Спецсимвол +- можно вводить бесконечно, что приведет к очистке значения testValue в данных

Модификаторы здесь также не могут реализовать пользовательский ввод ограничений и не могут соответствовать требованиям.

2. Отслеживайте изменения в поле ввода

Через данные обновления мониторинга @input можно вводить только числа, а содержимое ввода можно настраивать и ограничивать.

<input v-model="testValue" @input="testValue = testValue.replace(/[^\d]/g,'')">

Этот метод может удовлетворить потребности, но не может быть упакован для пакетного использования.

3. Инкапсулируйте глобальные директивы

Инкапсулировать команду ввода ограничения ввода

//input.js

const addListener = function(el, type, fn) {
  el.addEventListener(type, fn, false)
}

//去掉空格
const spaceFilter = function(el) {
  addListener(el, 'input', () => {
    el.value = el.value.replace(/\s+/, '')
  })
}

// 限制只能输入整数和小数（适用于价格类、最多两位小数）
const priceFilter = function(el) {
  addListener(el, 'input', () => {
    el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
    if (isNaN(el.value)) {
      el.value = ''
    }
  })
}

// 限制只能输入字母数字（适用于运单号）
const integerLetterFilter = function(el) {
  addListener(el, 'input', () => {
    el.value = el.value.replace(/[\W]/g,'')
    el.dispatchEvent(new Event('input'))
  })
}

export default {
  bind(el, binding) {
    if (el.tagName.toLowerCase() !== 'input') {
      el = el.getElementsByTagName('input')[0]
    }
    spaceFilter(el)
    switch (binding.arg) {
      case 'price':
        priceFilter(el)
        break
      case 'integerLetter':
        integerLetterFilter(el)
        break
      default:
        console.warn('未知指令类型',binding.arg)
        break
    }
  }
}

Зарегистрируйте глобальную пользовательскую директиву

//main.js

import inputFilter from '@/directives/InputFilter.js'

Vue.directive('inputFilter', inputFilter)

Использование директивы v-input-filter

<input v-modal="testValue" v-input-filter:price>

Таким образом, будет скрытый баг при использовании инкапсуляции, то есть при вводе символов, отличных от штатного лимита в инструкции, поле ввода в представлении отображается корректно, но последний символ testValue в браузере контрол bar Vue Devtools — это последний введенный символ.

Например, поле ввода abc, 123abc имеет значение , 123, но фактическое значение testValue равно c, 123c.

Причина в том, что значение, привязанное к vue, присваивается путем прослушивания ввода, и непосредственное изменение значения поля ввода не вызовет событие ввода.Вам нужно вручную снова вызвать событие ввода через dispatchEvent, но инициировав ввод в отслеживаемый обратный вызов ввода будет бесконечно зацикливаться, поэтому настройте мониторинг события keyup, чтобы изменить значение, измените его следующим образом:

//input.js

···
// 防抖
let debounce = (fn, delay) => {
  var delay = delay || 300;
  var timer;
  return function() {
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      timer = null;
      fn.apply(th, args);
    }, delay);
  };
}

// 限制只能输入整数和小数（适用于价格类、最多两位小数）
const priceFilter = function(el) {
  addListener(el, 'keyup', debounce(() => {//添加防抖 方便添加小数点
    el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
    if (isNaN(el.value)) {
      el.value = ''
    }
    //格式化去掉却没有输入小数位的小数点
    el.value = +el.value
    //触发input事件
    el.dispatchEvent(new Event('input'))
  }))
}

// 限制只能输入字母数字（适用于运单号）
const integerLetterFilter = function(el) {
  addListener(el, 'keyup', () => {
    el.value = el.value.replace(/[\W]/g,'')
    el.dispatchEvent(new Event('input'))
  })
}

···

Можно считать, что он соответствует требованиям здесь, и его можно использовать удобно. Я надеюсь, что смогу поделиться им и узнать лучший способ. Если есть лучший способ, пожалуйста, скажите мне, спасибо!

Категории