美术学院网站建设,郑州网络推广报价,美丽深圳微信公众号二维码,定制网站开发冬天里的白玫瑰文章目录 前言具体实现分析主要部分详细解析导入和类型定义mounted 钩子函数unmounted 钩子函数指令注册使用 总结 前言
使用vue中的自定义指令来实现input框输入限制
其中关键代码强制触发input #xff0c;来避免#xff0c;输入规则外的字符时#xff0c;没触发vue的响… 文章目录 前言具体实现分析主要部分详细解析导入和类型定义mounted 钩子函数unmounted 钩子函数指令注册使用 总结 前言
使用vue中的自定义指令来实现input框输入限制
其中关键代码强制触发input 来避免输入规则外的字符时没触发vue的响应导致实际值的不一致的问题。使用debounce 来优化性能 具体实现分析
我们定义了一个 Vue 自定义指令用于限制输入框中的值以确保符合特定的格式要求。它包括一些关键组件和功能以下是详细解析
主要部分 导入必要模块和类型定义 DirectiveBinding从 Vue 中导入用于指令绑定时的类型定义。debounce从 lodash 库中导入用于防抖处理输入事件。App从 Vue 中导入用于 Vue 应用实例的类型定义。 定义 InputElement 接口 InputElement 接口扩展了 HTMLInputElement增加了 _validateInput 可选属性用于存储验证函数。 定义 inputRestrictions 指令 mounted 钩子函数在指令绑定到元素时触发设置输入验证逻辑。unmounted 钩子函数在指令从元素上解绑时触发清除事件监听器。
详细解析
import { DirectiveBinding } from vue
import { debounce } from lodash
import type { App } from vueinterface InputElement extends HTMLInputElement {_validateInput?: (event: Event) void
}导入和类型定义
从 vue 和 lodash 库中导入必要的类型和工具函数。定义 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: AppElement) {app.directive(inputRestrictions, inputRestrictions)
}export default setupInputRestrictions指令注册
定义 setupInputRestrictions 函数用于将 inputRestrictions 指令注册到 Vue 应用实例中。
使用 el-inputv-modelvariable.mainForm.xxxv-input-restrictionspositiveIntegerplaceholderPlease input positive Integer/总结
实现了一个 Vue 自定义指令用于限制输入框中的值确保输入符合特定格式如正整数或带最多两位小数的正数。通过防抖处理和自定义验证逻辑避免了频繁的输入事件处理同时确保输入值的实时验证和更新。
