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

2025/3/14 23:53:08 来源：https://blog.csdn.net/weixin_38441229/article/details/141926232 浏览: 次关键词：编写vue的输入框的自定义指令研究

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

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

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

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

在自定义组件中加入输入框的监听事件，使用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>

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

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

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

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

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

全部代码

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

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

相关资讯

热文排行

最新新闻

推荐新闻

热搜词