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

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

    html 复制代码
    <template>
        <input>
    </template>
  2. 先确定自定义指令的编写方式。在setup里面直接编写。

    javascript 复制代码
    <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的时间,就可以实现监听到绑定的指令时,输入框的输入的回调。

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

    javascript 复制代码
    el.addEventListener('input', (e) => {
        console.log("e", e.data);
    ));
  8. 将输入框的输入内容进行存储。将内容存储到oldValue中。

    javascript 复制代码
    let oldValue = "";
            
    el.addEventListener('input', (e) => {
        if (e.data && !/^\-?\d*\.?\d*$/.test(el.value)) {
            el.value = oldValue;
        }
        oldValue = el.value;
    });
  9. 判断输入框的文本是不是实数,如果是,就使用旧值进行赋值。

    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;
            });
        }
    };
  10. 全部代码

    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>
相关推荐
哎呦你好1 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放10 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao27 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo27 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er33 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年36 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er40 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing40 分钟前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客1 小时前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html