In the actual development project, vUE instruction will inevitably have instructions that do not meet the requirements, at this time you need to define a custom, no more nonsense to say, directly start!

1. Use modifiers to implement numeric input

In VUE, modifiers can be added after V-modal to restrict input, such as:

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

However, the type=”number” style will appear, which can be cleared by adding the following CSS

*/ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none! important; } / / input[type="number"]{-moz-appearance:textfield; }Copy the code

The special symbol +-. Can be entered indefinitely, causing the value testValue in data to be emptied

The modifiers here also do not allow for custom restricted input and do not satisfy the requirements

2. Listen for input box changes

Listen for updates through @input, the implementation can only enter numbers, and can customize the restricted input content

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

This method can meet the requirements, but cannot be packaged for bulk use

3. Encapsulate global directives

Encapsulating input limits input instructions

//input.js const addListener = function(el, type, fn) { el.addEventListener(type, fn, 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 = '}})} / / restrictions can only input alphanumeric (applicable to the awb) 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(' unknown instruction type ',binding.arg) break}}}Copy the code

4. Register global custom directives

//main.js

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

Vue.directive('inputFilter', inputFilter)
Copy the code

Use the V-input-filter directive

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

A hidden bug with this encapsulation is that the input box in the view is correct when a character is entered outside the re limit in the command, but the testValue in the browser control bar Vue Devtools is the last character entered.

For example, if you enter ABC and 123ABC, the input field is 123, but the actual testValue is C and 123c.

The reason is that the value bound in vUE is assigned by listening for input. Directly modifying the value of the input box will not trigger the input event. You need to manually trigger the input event again through dispatchEvent. So modify the value by listening for keyUP events as follows:

/ / input. Js... / / stabilization 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 (() = > {/ / add image stabilization Convenient to add decimal el. Value = (el) value) match (/ ^ \ d * (\.? } \ d {0, 2)/g) [0]) | | null if (isNaN (el) value)) {el. Value = '} / / formatting to remove. But there was no small digital input point el value = + el. The value / / trigger input events El.dispatchevent (new Event('input'))}))} const integerLetterFilter = function(el) { addListener(el, 'keyup', () => { el.value = el.value.replace(/[\W]/g,'') el.dispatchEvent(new Event('input')) }) }Copy the code

Reprinted from: juejin.cn/post/687606…

end…