编写vue的输入框的自定义指令研究

1. 先决条件，准备一个input和vue项目。这里使用了vue3项目。

   <template>
       <input>
   </template>

2. 先确定自定义指令的编写方式。在setup里面直接编写。

   <template>
       <input v-input>
   </template>
   
   <script setup>
   const vInput = {
       mounted(el, binding, vnode) {
           console.log("222");
       }
   };
   </script>

3. 测试是否有打印出222。我这边是有直接打印的。
4. 我们解释一下他的参数 el，binding，vnode都有什么用，这里我们直接使用官网的图片。
   
5. 其中vnode是虚拟节点。
6. 在自定义组件中加入输入框的监听事件，使用el加入addEventListener的时间，就可以实现监听到绑定的指令时，输入框的输入的回调。

   <template>
       <input v-input ref="inputRef">
   </template>
   
   <script setup>
   const vInput = {
       mounted(el, binding, vnode) {
           if (vnode.type != "input") {
               return;
           }
           
           el.addEventListener('input', (e) => {
               const data = e.data;
           });
       }
   };
   </script>
   
   

7. 这边可以实现一个需求，输入框只能输入整数。详细的需求是，如果输入的字母，不会添加到结果的后面。输入的字符可以从e.data中获取。

   el.addEventListener('input', (e) => {
       console.log("e", e.data);
   ));

8. 将输入框的输入内容进行存储。将内容存储到oldValue中。

   let oldValue = "";
           
   el.addEventListener('input', (e) => {
       if (e.data && !/^\-?\d*\.?\d*$/.test(el.value)) {
           el.value = oldValue;
       }
       oldValue = el.value;
   });

9. 判断输入框的文本是不是实数，如果是，就使用旧值进行赋值。

   const vInput = {
       mounted(el, binding, vnode) {
           if (vnode.type != "input") {
               return;
           }
           let oldValue = "";
           el.addEventListener('input', (e) => {
               if (e.data && !/^\-?\d*\.?\d*$/.test(el.value)) {
                   el.value = oldValue;
               }
               oldValue = el.value;
           });
       }
   };

10. 全部代码

    <template>
        <input v-input ref="inputRef">
    </template>
    
    <script setup>
    const vInput = {
        mounted(el, binding, vnode) {
            if (vnode.type != "input") {
                return;
            }
            let oldValue = "";
            el.addEventListener('input', (e) => {
                if (e.data && !/^\-?\d*\.?\d*$/.test(el.value)) {
                    el.value = oldValue;
                }
                oldValue = el.value;
            });
        }
    };
    </script>