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

姚*鸿的博客2024-09-08 13:33

先决条件，准备一个input和vue项目。这里使用了vue3项目。
html 复制代码
```
<template>
    <input>
</template>
```

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

javascript 复制代码

<template>
    <input v-input>
</template>

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

测试是否有打印出222。我这边是有直接打印的。
我们解释一下他的参数 el，binding，vnode都有什么用，这里我们直接使用官网的图片。
其中vnode是虚拟节点。

在自定义组件中加入输入框的监听事件，使用el加入addEventListener的时间，就可以实现监听到绑定的指令时，输入框的输入的回调。

javascript 复制代码

<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>

这边可以实现一个需求，输入框只能输入整数。详细的需求是，如果输入的字母，不会添加到结果的后面。输入的字符可以从e.data中获取。
javascript 复制代码
```
el.addEventListener('input', (e) => {
    console.log("e", e.data);
));
```

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

javascript 复制代码

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

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

javascript 复制代码

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;
        });
    }
};

全部代码

javascript 复制代码

<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>