input 框输入数字 使用vue指令 全局注册 (配合标签的input也行)

没想到呀！我曹某人混迹江湖几十载，居然会被测试说我input有bug。。。

提示

1. 其实几乎所有浏览器的 input[type=number] 最后你获取的值也是 string 类型的；
   原因的话我认为是： 如果传输的数字过大，那就有可能出现精度丢失的问题(16位)，前后端就不能进行正确的数据交互，所以用 string 才是正解。
2. 如果你就是要用 number 不是不阔以。(数据正不正确我不管，我就要用，就是玩儿！)
   就在 blur 的时候将 value 转换成 number 类型就行了;
   为什么不在 input 的时候转呢？ 因为这样你会永远都输入不了点 . float类型 ，不信你可以试试

原生 onInput 实现

html

<input type="text" id="input" oninput="inputHandle()">

javascript

var inputNode = document.getElementById("input");

function inputHandle() {
     var value = inputNode.value;

	// 匹配规则： ± 号开头，匹配任意数字和 . （问题匹配到多个.）
     value = value.match(/^[-+]{1}|[\d.]/g) || []; 
     value = ''.concat(...value);
     
      // 消除 {2, n} 个点 '.'
     const valueSplitArr = value.split('.');
     value = '';
     valueSplitArr.forEach((item, index) => {
         value = (index === 1) ? value.concat(`.${item}`) : value.concat(item);
     });

     inputNode.value = value;
 }

vue 指令实现

用vue指令的话肯定是全局注册了

文件目录

inputNumberLimit.js 指令实现

/**
 * DOM(输入框) 输入数据时，规范 input内容 ()
 * @param {Object} vNode Vue 编译生成的虚拟节点（当前绑定节点）
 * @param {DOM} el  指令所绑定的元素，可以用来直接操作 DOM。
 */
function inputHandle(vNode, el) {
    const dom = el;
    const vn = vNode;

    let value = dom.value.toString().match(/^[-+]{1}|[\d.]/g) || []; // 匹配规则： ± 号开头，匹配任意数字和 . （问题匹配到多个.）
    value = ''.concat(...value);

    // 消除 {2, n} 个点 '.'
    const valueSplitArr = value.split('.'); 
    value = '';
    valueSplitArr.forEach((item, index) => {
        value = (index === 1) ? value.concat(`.${item}`) : value.concat(item);
    });

    vn.context.value = value;
    dom.value = value;
}

const inputNumberLimit = {
    update(el, binding, vNode) {
        inputHandle(vNode, el);
    },
};

export default inputNumberLimit;

指令 index.js 汇总整理

import inputNumberLimit from './modules/inputNumberLimit';

const directives = {
    inputNumberLimit,
    // 新加的指令在这儿引入
};

export default {
	// Vue.use() 其实就是调用 install(Vue) 方法
    install(Vue) {
        Object.keys(directives).forEach((key) => {
            Vue.directive(key, directives[key]);
        });
    },
};

main.js 里面 use 一下

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import myDirection from './directive/index';

Vue.config.productionTip = false;
Vue.use(myDirection);

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount('#app');

页面直接使用

<!-- 同时用v-model绑定一下数据 --->
<input type="text" v-inputNumberLimit v-model="value">
{{value}}