vue2自定义指令实现 el-input 输入数字,小数点两位 最高10位,不满足则截取符合规则的值作为新值

步骤 1:创建自定义指令

// 处理输入值,确保符合规则
function processValue(value) {// 过滤非数字和小数点let filtered = value.replace(/[^\d.]/g, '');const firstDotIndex = filtered.indexOf('.');// 处理多个小数点,保留第一个if (firstDotIndex !== -1) {filtered = filtered.substring(0, firstDotIndex + 1) + filtered.substring(firstDotIndex + 1).replace(/\./g, '');}// 分割整数和小数部分const parts = filtered.split('.');let integerPart = (parts[0] || '').slice(0, 10); // 整数最多10位let decimalPart = parts.length > 1 ? parts[1].slice(0, 2) : ''; // 小数最多两位// 处理以小数点开头的情况(如 ".98" → "0.98")if (filtered.startsWith('.') && integerPart === '') {integerPart = '0';}// 组合结果let newValue = integerPart;if (parts.length > 1 || filtered.endsWith('.')) {newValue += '.' + decimalPart;}return newValue;
}// 注册自定义指令
Vue.directive('number', {bind(el, binding, vnode) {const input = el.querySelector('input.el-input__inner');if (!input) return;let composing = false; // 标记是否在输入法组合中const handler = (e) => {if (composing) return;const newVal = processValue(e.target.value);if (e.target.value !== newVal) {e.target.value = newVal;input.dispatchEvent(new Event('input', { bubbles: true })); // 触发更新}};// 输入法处理const compositionStart = () => { composing = true; };const compositionEnd = (e) => {composing = false;handler(e);};input.addEventListener('compositionstart', compositionStart);input.addEventListener('compositionend', compositionEnd);input.addEventListener('input', handler);// 保存处理函数以便解绑el._numberHandlers = { compositionStart, compositionEnd, handler };// 初始值处理const initialValue = vnode.componentInstance?.value ?? input.value;const processedVal = processValue(initialValue);if (initialValue !== processedVal) {vnode.componentInstance?.$emit('input', processedVal);}},update(el, binding, vnode) {const input = el.querySelector('input.el-input__inner');const currentValue = vnode.componentInstance?.value ?? input?.value;if (currentValue === undefined) return;const newVal = processValue(currentValue);if (currentValue !== newVal) {vnode.componentInstance?.$emit('input', newVal);}},unbind(el) {const input = el.querySelector('input.el-input__inner');if (input && el._numberHandlers) {const { compositionStart, compositionEnd, handler } = el._numberHandlers;input.removeEventListener('compositionstart', compositionStart);input.removeEventListener('compositionend', compositionEnd);input.removeEventListener('input', handler);delete el._numberHandlers;}}
});

步骤 2:在组件中使用指令

<template><el-input v-number v-model="inputValue"></el-input>
</template><script>
export default {data() {return {inputValue: ''};}
};
</script>

功能说明

  1. 过滤非数字字符:只允许输入数字和小数点。
  2. 限制小数点数量:确保只保留第一个小数点,后续的自动移除。
  3. 整数部分限制:最多输入 10 位整数,超长部分截断。
  4. 小数部分限制:最多输入 2 位小数,超长部分截断。
  5. 输入法兼容:处理中文输入法状态,避免中途过滤。
  6. 初始值处理:当初始值不符合规则时自动修正。
  7. 实时更新:通过触发 input 事件确保 v-model 同步更新。

注意事项

  • 该指令依赖于 Element UI 的 el-input 结构,确保内部输入框的类名为 el-input__inner
  • 处理后的值会覆盖用户输入,确保始终符合规则。
  • 支持输入法组合输入(如中文拼音),提升用户体验。

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

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

相关文章

电子电气架构 --- 分布到集中的动カ系统及基于域控制器的架构

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

1216走迷宫

1216走迷宫 ⭐️难度&#xff1a;简单 &#x1f31f;考点&#xff1a;bfs &#x1f4d6; &#x1f4da; import java.util.Arrays; import java.util.LinkedList; import java.util.Queue; import java.util.Scanner;public class Main {public static void main(String[] …

【TMS570LC4357】之相关问题及解决

背景&#xff1a; 第一次接触TI的芯片&#xff0c;对其中遇见的问题或者不清楚的地方做个记录。 问题及解决方法 1.头文件未包含 添加对应头文件 解决方法 2. error #10008-D: cannot find file “C:/ti/Hercules/SafeTI Diagnostic Library/2.4.0/libs/SafeTILib_TMS570LC…

Vue 中 this 使用指南与注意事项

文章目录 1. this 的基本概念1.1 Vue 实例中的 this1.2 this 指向问题 2. 常见问题与解决方案2.1 生命周期钩子中的 this2.2 方法中的 this2.3 回调函数中的 this 3. 高级用法与技巧3.1 使用箭头函数3.2 绑定 this3.3 使用闭包 4. 性能优化与调试4.1 性能优化策略4.2 调试技巧 …

odbus TCP转Modbus RTU网关快速配置案例

Modbus TCP 转Modbus RTU网关快速配置案例 在工业自动化领域&#xff0c;Modbus 协议以其简洁和高效而著称&#xff0c;成为众多设备通信的首选。 随着技术的发展和应用场景的变化&#xff0c;Modbus 协议也发展出了不同的版本&#xff0c;其中 Modbus TCP 和 Modbus RTU 是两种…

共享内存通信效率碾压管道?System V IPC原理与性能实测

个人主页&#xff1a;敲上瘾-CSDN博客 进程通信&#xff1a; 匿名管道&#xff1a;进程池的制作&#xff08;linux进程间通信&#xff0c;匿名管道... ...&#xff09;-CSDN博客命名管道&#xff1a;命名管道——进程间通信-CSDN博客 目录 一、共享内存的原理 二、信道的建立 …

【net1】tcp,route,iptables,macvlan

文章目录 1.局域网:CSMA/CD2.互联网:ARP,NAT,路由表比映射表复杂3.tcp协议:telnet,tcpdump,syn/accept队列4.linux的route指令:route add4.1 案例:从ubuntu机器ping 199.199.199.199,配置路由使能通5.防火墙iptables:(ip+tables)对网络上数据包通过表的形式进行规…

如何用Deepseek制作流程图?

使用Deepseek制作流程图&#xff0c;本质上是让AI根据你的需求&#xff0c;生成相关流程图的代码&#xff0c;然后在流程图编辑器中渲染&#xff0c;类似于Python一样&#xff0c;ChatGPT可以生成代码&#xff0c;但仍需在IDE中执行。 你知道绘制流程图最高效的工具是什么吗&a…

基于PySide6与CATIA Automation的批量截图处理系统开发实践

引言 本文完整实现了基于PySide6 GUI框架与CATIA Automation技术的批量截图处理系统。系统支持对CATIA文件&#xff08;.CATPart/.CATProduct&#xff09;的自动化截图、图像优化及批量导出&#xff0c;通过模块化架构设计实现了超过200%的效率提升。本文将从技术架构、核心算…

【PyQt5】【Visual Studio】环境配置

前言 最近爱上搞软件编程&#xff0c;今天我就来教学如何进行Python软件编程PyQt5 下载工具 编程环境配置 Visual Studio Python下载最新版本就行 下载完之后呢&#xff0c;简单配置一下环境&#xff0c;Visual Studio的Python环境配置教程有很多可以自己在网上找 我这有Py…

uniapp+vue实现购物车的左滑删除功能

左滑删除 删除功能利用透明的改变在显示删除按钮实现思路代码效果展示 利用scroll滑动容器来实现代码实现效果展示 我们在移动端的电商平台中&#xff0c;一般都是左滑后然后删除按钮出现&#xff0c;用户可以点击删除按钮来进行该商品的删除&#xff0c;这里我分享两种方法来达…

CSSHTML新特性

HTML5 新特性探秘 在 Web 开发的不断演进中&#xff0c;HTML5 带来了一系列令人振奋的新特性&#xff0c;极大地提升了网页的功能和用户体验。今天&#xff0c;我们就来深入探究一下这些新特性。 语义化标签&#xff1a;让网页结构更清晰 语义化标签是 HTML5 的一大亮点。在…

网络爬虫【简介】

我叫补三补四&#xff0c;很高兴见到大家&#xff0c;欢迎一起学习交流和进步 今天来讲一讲爬虫 一、网络爬虫的定义 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;又称为网络蜘蛛、网络机器人等&#xff0c;是一种按照一定规则自动抓取互联网信息的程序或脚本。它…

数字隔离器,如何提升储能系统的安全与效能?

随着全球对光伏、风电等可再生能源需求的持续增长&#xff0c;在全球能源转型的浪潮中&#xff0c;储能技术凭借着可平衡能源供需、提高能源利用效率等优势&#xff0c;已成为实现 “双碳” 目标的核心支撑。据国家能源局公布数据显示&#xff0c;截至2024年底&#xff0c;我国…

AI玩Flappy Bird || 基于Q-Learning和DQN的机器学习

一、游戏介绍 Flappy Bird 游戏需要玩家控制一只小鸟越过管道障碍物。玩家只可以进行“跳跃”或者“不操作”两种操作&#xff0c;即点或不点。点则让小鸟上升一段距离&#xff0c;不点小鸟继续下降。若小鸟碰到障碍物或地面&#xff0c;则游戏失败。 本项目目的是开发一个深层…

【Linux内核系列】:文件系统收尾以及软硬链接详解

&#x1f525; 本文专栏&#xff1a;Linux &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 世界上只有一种个人英雄主义&#xff0c;那么就是面对生活的种种失败却依然热爱着生活 内容回顾 那么在之前的学习中&#xff0c;我们…

【eNSP实战】三层交换机使用ACL实现网络安全

拓图 要求&#xff1a; vlan1可以访问Internetvlan2和vlan3不能访问Internet和vlan1vlan2和vlan3之间可以互相访问PC配置如图所示&#xff0c;这里不展示 LSW1接口vlan配置 vlan batch 10 20 30 # interface Vlanif1ip address 192.168.40.2 255.255.255.0 # interface Vla…

Trae与Builder模式初体验

说明 下载的国际版&#xff1a;https://www.trae.ai/ 建议 要选新模型 效果 还是挺不错的&#xff0c;遇到问题反馈一下&#xff0c;AI就帮忙解决了&#xff0c;真是动动嘴&#xff08;打打字就行了&#xff09;&#xff0c;做些小的原型效果或演示Demo很方便呀&#xff…

Canoe Panel常用控件

文章目录 一、Panel 中控件分类1. 指示类控件2. 功能类控件3. 信号值交互类控件4. 其他类控件 二、控件使用方法1. Group Box 控件2. Input/Output Box控件3. Static Text控件4. Button控件5. Switch/Indicator 控件 提示&#xff1a;Button 和 Switch 的区别参考 一、Panel 中…

睡不着运动锻炼贴士

在快节奏的现代生活中&#xff0c;失眠似乎已成为许多人的“夜间伴侣”。夜晚辗转反侧&#xff0c;白天精神不振&#xff0c;这样的恶性循环让许多人苦不堪言。其实&#xff0c;除了调整作息和饮食习惯&#xff0c;适当的运动也是改善睡眠的一剂良药。今天&#xff0c;就让我们…