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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

归并排序:分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...