当前位置: 首页 > news >正文

vue3-自定义指令来实现input框输入限制

文章目录

  • 前言
  • 具体实现分析
      • 主要部分
      • 详细解析
        • 导入和类型定义
        • `mounted` 钩子函数
        • `unmounted` 钩子函数
        • 指令注册
        • 使用
      • 总结


前言

使用vue中的自定义指令来实现input框输入限制

  1. 其中关键代码强制触发input ,来避免,输入规则外的字符时,没触发vue的响应,导致实际值的不一致的问题。
  2. 使用debounce 来优化性能

具体实现分析

我们定义了一个 Vue 自定义指令,用于限制输入框中的值,以确保符合特定的格式要求。它包括一些关键组件和功能,以下是详细解析:

主要部分

  1. 导入必要模块和类型定义

    • DirectiveBinding:从 Vue 中导入,用于指令绑定时的类型定义。
    • debounce:从 lodash 库中导入,用于防抖处理输入事件。
    • App:从 Vue 中导入,用于 Vue 应用实例的类型定义。
  2. 定义 InputElement 接口

    • InputElement 接口扩展了 HTMLInputElement,增加了 _validateInput 可选属性,用于存储验证函数。
  3. 定义 inputRestrictions 指令

    • mounted 钩子函数:在指令绑定到元素时触发,设置输入验证逻辑。
    • unmounted 钩子函数:在指令从元素上解绑时触发,清除事件监听器。

详细解析

import { DirectiveBinding } from 'vue'
import { debounce } from 'lodash'
import type { App } from 'vue'interface InputElement extends HTMLInputElement {_validateInput?: (event: Event) => void
}
导入和类型定义
  • vuelodash 库中导入必要的类型和工具函数。
  • 定义 InputElement 接口,扩展 HTMLInputElement 以包含 _validateInput 属性。
const inputRestrictions = {mounted(el: InputElement, binding: DirectiveBinding) {const validateInput = debounce((event: Event) => {let value = (event.target as HTMLInputElement)?.valueif (value === undefined || value === null) {value = ''}const restrictionType = binding.valueswitch (restrictionType) {case 'positiveDecimal':value = value.replace(/[^\d.]/g, '') // 删除非数字和非小数点字符.replace(/^\./, '') // 删除开头的小数点.replace(/\.{2,}/, '.') // 限制多个小数点.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 保留两位小数点case 'positiveInteger':value = value.replace(/[^\d]/g, '') // 删除非数字字符if (value === '0') {value = ''}breakcase 'customRestriction':// 你的自定义限制逻辑breakdefault:break}if (event.target) {(event.target as HTMLInputElement).value = value}event.target?.dispatchEvent(new Event('input')) // 关键代码 触发 input 事件更新 v-model}, 300) // 300 毫秒的防抖延迟el._validateInput = validateInputel.addEventListener('input', validateInput)},unmounted(el: InputElement) {if (el._validateInput) {el.removeEventListener('input', el._validateInput)}}
}
mounted 钩子函数
  • 防抖处理:使用 lodash 的 debounce 函数创建 validateInput 函数,防止在短时间内多次触发输入验证。
  • 输入验证逻辑
    • 根据 binding.value 确定的 restrictionType 选择不同的验证逻辑:
      • positiveDecimal:允许输入正整数和最多两个小数点,去除多余字符。
      • positiveInteger:只允许输入正整数,去除非数字字符。
      • customRestriction:为将来可能的自定义限制保留。
  • 更新输入值:在修改输入值后,触发 input 事件以确保 Vue 的双向绑定更新。
unmounted 钩子函数
  • 清除事件监听器:在指令解绑时,移除 input 事件监听器,防止内存泄漏。
const setupInputRestrictions = (app: App<Element>) => {app.directive('inputRestrictions', inputRestrictions)
}export default setupInputRestrictions
指令注册
  • 定义 setupInputRestrictions 函数,用于将 inputRestrictions 指令注册到 Vue 应用实例中。
使用
   <el-inputv-model="variable.mainForm.xxx"v-input-restrictions="'positiveInteger'"placeholder="Please input positive Integer"/>

总结

实现了一个 Vue 自定义指令,用于限制输入框中的值,确保输入符合特定格式(如正整数或带最多两位小数的正数)。通过防抖处理和自定义验证逻辑,避免了频繁的输入事件处理,同时确保输入值的实时验证和更新。

相关文章:

vue3-自定义指令来实现input框输入限制

文章目录 前言具体实现分析主要部分详细解析导入和类型定义mounted 钩子函数unmounted 钩子函数指令注册使用 总结 前言 使用vue中的自定义指令来实现input框输入限制 其中关键代码强制触发input &#xff0c;来避免&#xff0c;输入规则外的字符时&#xff0c;没触发vue的响…...

MySQL日志——redolog

redo log&#xff08;重做日志&#xff09; 为什么需要redo log&#xff1f; 在mysql提交一个事务后&#xff0c;这个事务所作的数据修改并不会直接保存到磁盘文件中&#xff0c;而是先保存在buffer pool缓冲区中&#xff0c;在需要读取数据时&#xff0c;先从缓冲区中找&…...

Python热涨落流体力学求解算法和英伟达人工智能核评估模型

&#x1f3af;要点 &#x1f3af;平流扩散简单离散微分算子 | &#x1f3af;相场模拟&#xff1a;简单旋节线分解、枝晶凝固的 | &#x1f3af;求解二维波动方程&#xff0c;离散化时间导数 &#x1f3af;英伟达 A100 人工智能核性能评估模型 | &#x1f3af;热涨落流体动力学…...

【C语言】数组参数和指针参数详解

在写代码的时候难免要把【数组】或者【指针】传给函数&#xff0c;那函数的参数该如何设计呢&#xff1f; 1 一维数组传参 #include <stdio.h> void test(int arr[])//ok? {} void test(int arr[10])//ok? {} void test(int* arr)//ok? {} void test2(int* arr[20])…...

Tuple 元组

文章目录 一、什么是元组 &#xff1f;二、元组的具体操作2.1 创建元组2.1.1 tuple() 创建元组函数和 list() 创建列表函数总结 2.2 元组的元素访问操作2.3 元组的元素计数操作2.4 zip 对象 一、什么是元组 &#xff1f; 列表属于可变序列,可以任意修改列表中的元素。 元组的…...

(资料收藏)王阳明传《知行合一》共74讲,王阳明知行合一音频讲解资料

今天给大家带来的不是软件&#xff0c;而是一份精神食粮——《知行合一》的教程福利。这可不是一般的教程&#xff0c;它关乎心灵&#xff0c;关乎智慧&#xff0c;关乎我们如何在纷繁复杂的世界中找到自己的位置。 咱们得聊聊王阳明&#xff0c;这位明代的大儒&#xff0c;他…...

空气质量预报模式系统WRF-CMAQ

空气污染问题日益受到各级政府以及社会公众的高度重视&#xff0c;从实时的数据监测公布到空气质量数值预报及预报产品的发布&#xff0c;我国在空气质量监测和预报方面取得了一定进展。随着计算机技术的高速发展、空气污染监测手段的提高和人们对大气物理化学过程认识的深入&a…...

Collections.sort()方法总结

Collections.sort()方法总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨 Java 中的 Collections.sort() 方法。这个方法是 Java 集合框架中的…...

Java23种设计模式(二)

1、单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类&#xff0c;该类负责创建自己的对象&#xff0c;同时确保只有…...

Web前端收入来源:探索多元化的盈利渠道

Web前端收入来源&#xff1a;探索多元化的盈利渠道 在数字化时代&#xff0c;Web前端技术日益成为推动互联网业务发展的重要力量。对于前端开发者而言&#xff0c;除了传统的薪资收入外&#xff0c;还存在多种潜在的收入来源。本文将从四个方面、五个方面、六个方面和七个方面…...

抽象工厂模式(大话设计模式)C/C++版本

抽象工厂模式 C 参考&#xff1a;https://www.cnblogs.com/Galesaur-wcy/p/15927110.html #include <iostream> using namespace std;// 抽象产品Department ,定义具体产品的公共接口 class Department { public:virtual ~Department() default;virtual void Insert()…...

springboot宠物医院信息管理系统-计算机毕业设计源码04164

摘 要 现如今在中国&#xff0c;随着人民生活质量的逐渐提高&#xff0c;以及人民群众消费能力的日渐增长&#xff0c;各种各样的家养小动物&#xff0c;已经逐渐成为人类越来越亲密的生活伴侣。并且&#xff0c;现如今社会竞争及其激烈&#xff0c;人们的生活节奏越发急促、紧…...

Leetcode Hot100之哈希表

1. 两数之和 题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现思路…...

Vision Transformer with Sparse Scan Prior

摘要 https://arxiv.org/pdf/2405.13335v1 In recent years, Transformers have achieved remarkable progress in computer vision tasks. However, their global modeling often comes with substantial computational overhead, in stark contrast to the human eye’s eff…...

笔记-python 中BeautifulSoup入门

在前面的例子用&#xff0c;我用了BeautifulSoup来从58同城抓取了手机维修的店铺信息&#xff0c;这个库使用起来的确是很方便的。本文是BeautifulSoup 的一个详细的介绍&#xff0c;算是入门把。文档地址&#xff1a;http://www.crummy.com/software/BeautifulSoup/bs4/doc/ …...

Tomcat Websocket应用实例研究

概述 本文介绍了如何根据Tomcat给出的websocket实例&#xff0c;通过对实例的学习&#xff0c;定制自己基于websocket的应用。 环境及版本&#xff1a; Ubuntu 22.04.4 LTSApache Tomcat/10.1.20openjdk 11.0.23 2024-04-16浏览器&#xff1a;Chrome 相关资源及链接 Class…...

leetcode-11-二叉树前中后序遍历以及层次遍历

一、递归版 前序遍历 &#xff08;先根遍历&#xff09; 中左右 class Solution {public List<Integer> preorderTraversal(TreeNode root) {List<Integer> result new ArrayList<Integer>();preorder(root, result);return result;}public void preorder…...

Python基础学习笔记(十一)——集合

目录 一、集合的介绍与创建二、集合的存储原理三、元素的修改1. 添加元素2. 删除元素 四、集合的运算五、集合的判定 一、集合的介绍与创建 集合&#xff08;set&#xff09;&#xff0c;一种可变、无序、不重复的数据结构&#xff0c;由大括号{}内、用逗号分隔的一组元素组成。…...

FineReport

1.FineReport 官网 &#xff1a;FineReport产品简介- FineReport帮助文档 - 全面的报表使用教程和学习资料 下载地址 免费下载FineReport - FineReport报表官网 FineReport是一款用于报表制作&#xff0c;分析和展示的工具。 普通模板&#xff1a;是 FineReport 最常用&#xf…...

嵌入式就业前景好么

嵌入式就业前景在当前环境下是较为乐观的&#xff0c;以下是对嵌入式就业前景的详细分析&#xff1a; 广泛应用领域&#xff1a;嵌入式系统广泛应用于智能家居、医疗设备、航空航天等领域。随着物联网&#xff08;IoT&#xff09;的快速发展&#xff0c;预计到2024年&#xff…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...