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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/855645.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无需安装就能一键部署Stable Diffusion 3?

一键部署使用SD3&#xff1f;让你的创作更加便捷&#xff01; 前言 厚德云上架SD3! 距离Stable Diffusion 3的上线已经有一阵时间了。从上线至今SD3也是一直好评不断&#xff0c;各项性能的提升也让它荣获“最强开源新模型”的称号。成为了AI绘画设计师们新的香馍馍。 可对于SD…

短期内股票跌了就难受的人有哪些?

短期内股票跌了难受的人&#xff0c;主要是四类 第一类压根就没有打算长期持有&#xff0c;就是玩短线的。这类人来股市是为了一夜暴富的。 第二类人&#xff0c;这类人也是打算一夜暴富的&#xff0c;但是他们会上杠杆&#xff0c;借钱买股票。股价涨了好说&#xff0c;股价…

python网站地图解析

分析&#xff1a; ⽹站的地图&#xff08;sitemap.xml&#xff09;是⼀个XML⽂件&#xff0c;列出了⽹站上所有可访问的⻚⾯的URL。解析⽹站的地图可以⾼效地发现⽹站上所有的⻚⾯&#xff0c;特别是那些可能不容易通过常规爬⾍发现的⻚⾯。 # Python代码&#xff1a; 以下是⼀…

Mac用虚拟机玩游戏很卡 Mac电脑玩游戏怎么流畅运行 苹果电脑怎么畅玩Windows游戏

对于许多Mac电脑用户而言&#xff0c;他们经常面临一个令人头疼的问题&#xff1a;在虚拟机中玩游戏时卡顿严重&#xff0c;影响了游戏体验。下面我们将介绍Mac用虚拟机玩游戏很卡&#xff0c;Mac电脑玩游戏怎么流畅运行的相关内容。 一、Mac用虚拟机玩游戏很卡 下面我们来看…

嵌入式期末复习--补充(答案来自文心一言)

一、第一章 1、常见的RTOS&#xff0c;嵌入式操作系统的特点 RTOS就是实时操作系统。根据响应时间的不同&#xff0c;可分为以下3类&#xff1a; &#xff08;1&#xff09;强实时嵌入式操作系统 响应时间&#xff1a;微妙或毫秒 &#xff08;2&#xff09;一般实时…

删除重复文件如何操作?电脑重复文件删除教程分享:详细!高效!

在数字化时代&#xff0c;我们的电脑中往往存储着大量的文件&#xff0c;这些文件随着时间的推移可能会产生许多重复项。重复文件不仅占用了宝贵的硬盘空间&#xff0c;还可能导致文件管理的混乱。因此&#xff0c;定期删除重复文件是维护电脑健康和提高工作效率的重要步骤。本…

请问为什么下面的HTML代码没有显示内容?

请问下面的HTML程序为什么没有显示内容&#xff1f; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>HTML教程()</title> <script>function getTime() {var date new Date();var time date.toLocalString…

OSPF和RIP的路由引入(华为)

#交换设备 OSPF和RIP的路由引入 不同的网络会根据自身的实际情况来选用路由协议。比如有些网络规模很小&#xff0c;为了管理简单&#xff0c;部署了 RIP; 而有些网络很复杂&#xff0c;可以部署 OSPF。不同路由协议之间不能直接共享各自的路由信息&#xff0c;需要依靠配置路…

洗地机哪个品牌比较好?四款好用靠谱的优质洗地机推荐

随着现代生活节奏的加快&#xff0c;家庭清洁成了一项耗时且繁琐的任务。洗地机凭借其智能化和高效的清洁能力&#xff0c;越来越受到大家的青睐。然而&#xff0c;市场上各种品牌和型号琳琅满目&#xff0c;让人眼花缭乱。为了帮助大家在众多选择中找到心仪的产品&#xff0c;…

力扣540.有序数组中的单一元素

力扣540.有序数组中的单一元素 找到 偶数位做二分 若不等 说明当前mid在单一元素右侧 r mid若相等 说明当前mid在单一元素左侧 l mid 2 class Solution {public:int singleNonDuplicate(vector<int>& nums) {int l 0,r nums.size() -1;while(l<r){int mid…

【话题】层出不穷的大模型产品,你怎么选?

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 引言元宝体验产品介绍AI作画 文档总结AI超级产品文章推荐 引言 随着近日腾讯元宝APP的正式上线&#xff0c;国内大模型产品又添一员。 关于接连出现的“全能“大模型AI…

jfrog artifactory oss的下载地址

在这里记录下下载地址&#xff1a; https://releases.jfrog.io/artifactory/bintray-artifactory/org/artifactory/oss/jfrog-artifactory-oss/

Java 开发面试题精选:Mysql 一篇全搞定

在这里插入图片描述 前言 在高级Java开发工程师的面试中&#xff0c;MySQL作为常见的数据库技术&#xff0c;其掌握程度往往是评估候选人综合能力的重要组成部分。在这篇文章中&#xff0c;我精选了一些最可能被问到的与MySQL相关的面试题目&#xff0c;这些题目可以全面考察…

dockerfile镜像制作

镜像的制作方式 基于容器&#xff08;现有的镜像&#xff09;创建镜像 基于现有镜像创建主要使用 docker commit 命令&#xff0c;即把一个容器里面运行的程序以及该 程序的运行环境打包起来生成新的镜像 docker commit [选项] 容器ID/名称 仓库名称:[标签]-m说明信息&#…

芯片验证 | FPGA 原型验证

更多完整内容访问&#xff1a;【芯片验证 | FPGA 原型验证】

数据分析-相关性

0、提高数据样本质量 首先是确保数据采集的准确性与可靠性&#xff0c;也就是如何降低数据误差 系统误差是由测量工具不精确和测量方法选择不当造成的。这类误差我们可以通过校准工具或者选择更合适的测量方法来消除&#xff1b;随机误差是由环境因素等外部不可控原因导致的&…

MyBatis 源码分析--获取SqlSession

前言&#xff1a; 前文我们从源码层面梳理了 SqlSessionFactory 的创建过程&#xff0c;本篇我们继续分析一下 SqlSession 的获取过程。 初识 MyBatis 【MyBatis 核心概念】 案例代码&#xff1a; public class MyBatisTest {Testpublic void test() throws IOException {/…

Clickhouse监控_监控的指标以及Grafana配置Clickhouse指标异常时触发报警

使用PrometheusGrafana来监控Clickhouse服务和性能指标 Clickhouse监控指标的官方文档https://clickhouse.com/docs/zh/operations/monitoring 建议使用PrometheusGrafana组合监控Clickhouse服务和性能指标&#xff0c;数据流向&#xff1a;Prometheus的clickhouse_exporter组件…

【短剧看剧系统之投流版】短剧看剧系统功能更新,前端uniapp搭建开发

目录 一、常规款短剧系统和投流版的区别&#xff1f; 二、后端体系 1.管理端&#xff1a; 2.代理投流端 三、功能区别 总结&#xff1a; 前言&#xff1a; 短剧看剧系统目前在抖音端是比较热门的&#xff0c;最重要的功能就是可以接入第三方cps&#xff0c;包含类目报白…

1. ELK日志分析

ELK日志分析 一、ELK作用、组件1、作用2、核心组件2.1 beat软件2.1 Logstash2.2 Elasticsearch2.3 Kibana 二、ELK部署、测试1、环境规划2、确保SELinux关闭、时间同步3、所有主机添加主机名解析4、三台ES主机安装jdk 1.155、调整系统资源限制6、部署es集群6.1 创建普通用户elk…