当前位置: 首页 > 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…...

为啥找对象千万别找大厂男,还好我不是大厂的。。

网上看到一大厂女员工发文说&#xff1a;找对象千万别找大厂男&#xff0c;理由说了一大堆&#xff0c;无非就是大厂男为了逃避带娃&#xff0c;以加班为由宁愿在工位上玩游戏也不愿回家。当然这种观点有的人赞同有的人反对。 网友精彩评论&#xff1a; --------------下面是今…...

如何查看k8s中service的负载均衡策略

在Kubernetes中&#xff0c;Service的负载均衡策略一般由kube-proxy负责&#xff0c;kube-proxy使用iptables或IPVS规则进行负载均衡。默认情况下&#xff0c;kube-proxy使用的是轮询&#xff08;Round Robin&#xff09;策略&#xff0c;但是在使用IPVS模式时&#xff0c;可以…...

Linux-DNS域名解析服务01

BIND 域名服务基础 1、DNS&#xff08;Domain Name System&#xff09;系统的作用及类型 整个 Internet 大家庭中连接了数以亿计的服务器、个人主机&#xff0c;其中大部分的网站、邮件等服务器都使用了域名形式的地址&#xff0c;如 www.google.com、mail.163.com 等。很显然…...

[c++刷题]贪心算法.N01

题目如上: 首先通过经验分析&#xff0c;要用最少的减半次数&#xff0c;使得数组总和减少至一半以上&#xff0c;那么第一反应就是每次都挑数组中最大的数据去减半&#xff0c;这样可以是每次数组总和值减少程度最大化。 代码思路:利用大根堆去找数据中的最大值&#xff0c;…...

推荐常用的三款源代码防泄密软件

三款源代码防泄密软件——安秉源代码加密、Virbox Protector 和 MapoLicensor——确实各自在源代码保护的不同方面有其专长。这些软件可以满足企业对于源代码保护的三大需求&#xff1a;防止泄露、防止反编译和防止破解。 安秉源代码加密&#xff1a; 专注于源代码文件的加密&…...

Android 13 高通设备热点低功耗模式(2)

前言 之前写过一篇文章:高通热点被IOS设备识别为低数据模式,该功能仿照小米的低数据模式写的,散发的热点可以达到被IOS和小米设备识别为低数据模式。但是发现IOS设备如果后台无任何网络请求的时候,息屏的状态下过一会,会自动断开热点的连接。 分析 抓取设备的热点相关的…...

web前端任职条件:全面解析

web前端任职条件&#xff1a;全面解析 在当今数字化快速发展的时代&#xff0c;Web前端技术已经成为互联网行业不可或缺的一部分。作为一名Web前端开发者&#xff0c;需要具备哪些任职条件呢&#xff1f;本文将从四个方面、五个方面、六个方面和七个方面为您深入剖析。 四个方…...

分析医药零售数据该用哪个BI数据可视化工具?

数据是企业决策的重要依据&#xff0c;可以用于现代企业大数据可视化分析的BI工具有很多&#xff0c;各有各擅长的领域。那么哪个BI数据可视化工具分析医药零售数据又好又快&#xff1f; 做医药零售数据分析首推奥威BI数据可视化工具&#xff01; 奥威BI数据可视化工具做医药…...

如何使用芯片手册做软件开发?

在阅读和利用芯片手册进行软件开发时&#xff0c;你应该关注以下几个关键点&#xff1a; 引脚功能&#xff1a;了解芯片上每个引脚的功能&#xff0c;包括它们可以被配置为输入还是输出&#xff0c;以及它们支持的特殊功能&#xff0c;如模拟输入、PWM输出、中断等。 寄存器映…...

基于深度学习的文本翻译

基于深度学习的文本翻译 基于深度学习的文本翻译&#xff0c;通常称为神经机器翻译&#xff08;Neural Machine Translation, NMT&#xff09;&#xff0c;是近年来在自然语言处理&#xff08;NLP&#xff09;领域取得显著进展的技术。NMT通过使用深度神经网络来自动学习和翻译…...

免费图片素材网/seo的基本工作内容

转自&#xff1a;https://www.cnblogs.com/hfultrastrong/p/8621450.html Spring框架中的Import注解 在之前的文章中&#xff0c;作者介绍了Spring JavaConfig. 这是除了使用传统的XML文件之外&#xff0c;spring带来的新的选择。同样作者列出了作为Java Config一部分的annotat…...

江西建设厅网站财务部/推广普通话的意义简短

P;\jopi01、问题描述&#xff1a;51Testing软件测试网\Q*WaJ[1I)JO^YC"T0需要让服务器每隔一段时间自动断开网络&#xff0c;再隔一段时间自动连接网络51Testing软件测试网:Q$z&E&|3z #GhNG*XF{9p02、解决方案&#xff1a;51Testing软件测试网1Y*u\5v _51Testing软…...

1.2婚庆网站建设的目的/免费域名解析平台

技术笔记 这两个机制的目的都是为了 解耦合 ,它们时联系和相互独立的。这样说似乎有些说不通。我们具体看一看 *** 它们是 &#xff08;联系&#xff09; 还是 &#xff08;独立&#xff09; 取决于我们要达到的目的&#xff1a; 目的一&#xff1a; 场景介绍&#xff1a;紧密联…...

浑南区建设局网站/全媒体广告代理加盟靠谱吗

佟小爱 你这个月出勤状况很差劲 工作态度不积极 精神不集中 生活习惯不但没改好反而越来越差 晚睡晚起 不吃早饭 不注意增加营养 很少吃水果 不锻炼身体 不能调节好心情 怎么仇恨心理那么严重 没有常常泡澡 没有用卸装油按卸装程序卸装 脏手能不能不总碰耳朵 眼睛怎么又发起炎来…...

自己怎么做公司网站/郑州seo技术培训班

网上流传的那个nerdtree的安装方法并不是很实用&#xff0c;因为NERDTREE是依赖pathogen插件管理器的。如果没有安装pathogen的话&#xff0c;直接安装NERDTree是会报函数为声明之类的错误的 pathogen 我们首先来介绍这款用来管理插件的插件——pathogen。 下载地址 项目地…...

element ui设计网站/seo薪酬如何

前言 很多朋友都在用Windows Live Writer在园子里写博客吧&#xff0c;同样也有很多朋友都会在文章结束的时候加上版权信息&#xff0c;更有利于保护自己的合法权益。 这些版权信息的样式很多&#xff0c;例如&#xff1a; 再如&#xff1a; 如果每次写文章的时候都重新写一段这…...