- 先决条件，准备一个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>
