使用iviewui组件库的坑
背景
使用view-design组件库的Input组件的时候,按照产品的要求,输入框中只能键入正整数。
使用效果
-
如果直接使用组件的type属性,设置类型为
number时,乍一看没啥问题,但是当我们键入 小数点(.) 或者 e/E 后面没有跟任何数字时,会发现我们的input或者change回调函数中,根本就没有小数点这个字符,还有很多字符都会对这个限制(输入框中只能键入正整数)有影响,不建议使用这中方案

以上是示例的输出结果,我们可以明显的发现,在键入小数点,返回值中没有小数点,当再输入一个数值,小数点才会显现出来。原因:
任何数字都是可接受的值,只要它是有效的浮点数w3c的官方解释:什么是有效浮点数 -
我们使用type类型为
text,本来以为这种肯定可以,因为我们可以在input或者change的时候,更改(格式化)输入的结果,
类似这样:
onInput/onChange(value) {
/** 非数字的字符全部替换为空字符串 */this.settingForm.readingTime = value.replaceAll(/\D/g, "");
}
但是,神奇的发现,竟然没有效果,键入的值没有按照预计的结果输出,并没有把非数字字符替换为空字符串.
然后当我去查看view-design组件库源码之后,发现确实他们做处理了
handleInput (event) {if (this.isOnComposition) return;let value = event.target.value;if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value);this.$emit('input', value);/** 把值更改了 **/this.setCurrentValue(value);this.$emit('on-change', event);
},
setCurrentValue (value) {
/** 当我们执行change更改的时候,它又认为前后值相同,直接return */if (value === this.currentValue) return;this.$nextTick(() => {this.resizeTextarea();});this.currentValue = value;if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {this.dispatch('FormItem', 'on-form-change', value);}},watch: {value (val) {this.setCurrentValue(val);}},
解决
由于项目中还引入了elementUI,所以博主直接使用了elementUI,完美解决。
有一说一,名声高还是有一定实力的。
写在最后
当我们发现某些行为出乎意料时,首先看看我们使用的工具是否鲁棒性够好,在简单的问题上,不要过于怀疑我们自己的问题
如果有帮助到大家,不管是问题本身还是思维方式,都希望大家可以点个赞支持下博主!!!
相关文章:
使用iviewui组件库的坑
背景 使用view-design组件库的Input组件的时候,按照产品的要求,输入框中只能键入正整数。 使用效果 如果直接使用组件的type属性,设置类型为number时,乍一看没啥问题,但是当我们键入 小数点(.) 或者 e/E 后面没有跟任…...
高级sql使用技巧
窗口函数(Window Functions): 窗口函数可以在结果集的行之间进行计算,例如计算移动平均值、排名等。在使用时,可以使用 OVER() 语句来定义窗口。例如: sql SELECT employee_id,salary,AVG(salary) OVER (P…...
403 Request Entity Too Lager(请求体太大啦)
昨天收到 QA 的生产报障,说是测试环境的附件上传功能报了 403 的错误,错误信息:403 Request Entity Too Lager。我尝试复现问题,发现传个几兆的文件都费劲啊,一传一个失败。不用说,项目用到 ng 代理&#x…...
Flutter 正在切换成 Monorepo 和支持 workspaces
其实关于 Monorepo 和 workspaces 相关内容在之前《Dart 3.5 发布,全新 Dart Roadmap Update》 和 《Flutter 之 ftcon24usa 大会,创始人分享 Flutter 十年发展史》 就有简单提到过,而目前来说刚好看到 flaux 这个新进展,所以就再…...
小白初入Android_studio所遇到的坑以及怎么解决
1. 安装Android_studio 参考:Android Studio 安装配置教程 - Windows(详细版)-CSDN博客 Android Studio超级详细讲解下载、安装配置教程(建议收藏)_androidstudio-CSDN博客 想下旧版本的android_studio的地址(仅供参考…...
NetCore使用Aop和内存缓存对接口、方法进行数据缓存
通过Aop内存缓存对接口、方法进行缓存 源码地址https://gitee.com/wangbenchi66/nuget 1. nuget包引入 必须引入包 至少在2024.11.7以上 <PackageReference Include"WBC66.Cache.Core" Version"2024.11.7" />必须开启内存缓存 否则后续步骤无法正…...
playwright学习记录2--定位方式
快捷导航 定位方式:元素操作断言方式自动等待 定位方式: csspage.get_by_role() 通过显式和隐式可访问性属性进行定位。page.get_by_text() 按文本内容定位。page.get_by_label() 通过关联标签的文本定位表单控件。page.get_by_placeholder() 通过占位符…...
响应式网页设计--html
一,HTML 文档的基本结构 一个典型的 HTML 文档包含了几个主要部分,基本结构如下(本文以下出现的所有代码都可以套入下面示例进行测试): <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8&q…...
C#核心(8) 静态成员
前言 先前我们已经学习了成员变量以及成员属性。 静态成员对于在整个应用程序中共享数据和功能非常有用。它们可以用于跟踪全局状态、共享常量和实现单例模式等。但是需要注意的是,过度使用静态成员可能导致代码变得难以维护和测试,因此应谨慎使用。其…...
关于git使用的图文教程(包括基本使用,处理冲突问题等等)超详细
目录 用户签名,初始化git git提交流程图 提交到本地库 版本穿梭 分支操作 分支合并冲突 团队协作 github的使用 推送代码 克隆 拉取代码 团队协作冲突 团队协作之分支管理 推送分支到分支: 拉去远程库分支到本地库: 本地删除远程分支&am…...
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
在前端开发的广阔天地中,Axios 犹如一颗璀璨的明星,为我们与服务器之间的通信搭建起坚实的桥梁。其中,responseType 属性更是赋予了我们灵活处理服务器响应的强大能力。 一、Axios 的 responseType 属性值及示例 1.arraybuffer 当我们将 r…...
redis集群介绍
1. 节点(Node): • Redis集群中的单个Redis服务器实例。每个节点都运行一个Redis服务器进程,并维护自己的数据。 2. 分片(Sharding): • 将数据集分割成多个部分,并分布到不同的节点…...
JDK中常用的包有哪些?
1.java.lang 描述:包含Java语言的核心类,不需要显式导入。 常用类:Object、String、Math、System、Thread、Exception等。 2.java.util 描述:提供了集合框架、日期和时间功能、随机数生成、扫描和格式化等实用工具类。 常用类…...
校园官网练习---web
HTML: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>西安工商学院</title><…...
MySQL中指定字段的某个值排在前面
一 需求 如果我们想讲表中指定的字段的某一个值排序在最前面应该如何处理? 二 实现方式 方法 1、使用<>,xml中使用<![CDATA[跳过解析的特殊符号]]>或者<(小于符号)>(大于符号) ORDER …...
【51单片机】I2C总线详解 + AT24C02
学习使用的开发板:STC89C52RC/LE52RC 编程软件:Keil5 烧录软件:stc-isp 开发板实图: 文章目录 AT24C02介绍存储器 I2C总线介绍I2C时序结构数据帧AT24C02数据帧 编程实例 —— 按键控制数据大小&存储器写入读出 AT24C02介绍 …...
直接插入排序法
任务描述 本关任务:要求编写程序实现直接插入排序的功能。 相关知识 直接插入排序,是指将无序序列中的各元素依次插入到已经有序的数组中。 假设数组中前 i-1 元素已经有序,现在要将线性表中第 i 个元素插入到前面的有序子表中,…...
mysql中InnoDB索引与MyISAM索引
mysql索引 InnoDB 索引存储 主键索引(聚簇索引) 定义:主键索引是 InnoDB 存储引擎的聚簇索引,它决定了表中数据的物理存储顺序。每个 InnoDB 表都有一个且仅有一个聚簇索引。存储:主键索引的叶子节点直接包含表的数…...
Redis如何保证数据不丢失(可靠性)
本文主要以学习为主,详细参考:微信公众平台 Redis 保证数据不丢失的主要手段有两个: 持久化 多机部署 我们分别来看它们两的具体实现细节。 1.Redis 持久化 持久化是指将数据从内存中存储到持久化存储介质中(如硬盘…...
【计网】物理层学习笔记
【计网】物理层 物理层概述 物理层要实现的功能 在各种传输媒体上传输比特0和1,进而为上面的数据链路层提供透明传输比特流的作用。 物理层接口特性 物理层之下的传输媒体 传输媒体是计网设备之间的物理通路,也称为传输介质。 传输媒体并不包含在…...
Kubernetes 与 GitOps 最佳实践
Kubernetes 与 GitOps 最佳实践 一、前言 哥们,别整那些花里胡哨的。GitOps 是现代 Kubernetes 运维的重要趋势,今天直接上硬货,教你如何在 Kubernetes 中实现 GitOps 工作流。 二、GitOps 核心概念 概念描述优势声明式配置所有配置以声明式方…...
别再死磕MIG了!ZYNQ PS端DDR3做帧缓存,用VDMA+HP接口实战指南
ZYNQ视频处理架构革命:VDMAHP接口实战全解析 从传统FPGA到ZYNQ的思维转换 在传统FPGA视频处理项目中,工程师们早已习惯使用MIG IP核管理DDR控制器,通过用户接口实现帧缓存功能。这种模式在纯FPGA环境中运行良好,但当转向ZYNQ平台…...
双目视觉实战:从标定参数到深度图的完整OpenCV实现指南
双目视觉实战:从标定参数到深度图的完整OpenCV实现指南 在计算机视觉领域,双目立体视觉一直是获取三维环境信息的重要技术手段。与激光雷达等主动传感器相比,基于双相机的立体视觉系统具有成本低、数据丰富、易于部署等优势。本文将深入探讨如…...
【数字逻辑】实战解析:从PLD到FPGA的演进与应用场景
1. 可编程逻辑器件的技术演进之路 第一次接触可编程逻辑器件是在大学实验室里,当时看着老师用一个小芯片就实现了整个数字钟的功能,完全颠覆了我对传统电路板的认知。这种"魔术般"的芯片就是PLD(可编程逻辑器件)&#…...
智能家居选遥控器?RF 2.4G vs 蓝牙 vs IR 保姆级对比指南
智能家居遥控技术终极对决:RF 2.4G vs 蓝牙 vs IR 深度解析 当你深夜躺在沙发上想调暗灯光,却发现必须起身对准空调才能操作——这种尴尬正是选错遥控技术的代价。智能家居的"最后一米"控制体验,往往取决于那只看不见的传输协议。本…...
图像比对与像素级分析:用diffimg实现高效差异检测
图像比对与像素级分析:用diffimg实现高效差异检测 【免费下载链接】diffimg Differentiate images in python - get a ratio or percentage difference, and generate a diff image 项目地址: https://gitcode.com/gh_mirrors/di/diffimg 在视觉内容创作与技…...
MQTT.fx连接阿里云物联网平台全流程指南(含密码生成工具推荐)
MQTT.fx连接阿里云物联网平台全流程指南(含密码生成工具推荐) 物联网开发者在初次尝试将设备接入阿里云物联网平台时,往往会遇到各种连接问题。作为最受欢迎的MQTT客户端工具之一,MQTT.fx因其简洁直观的界面和强大的功能…...
告别黑盒操作:详解mmc_utils在Android设备上的20+个实用命令(从extcsd读到RPMB写)
eMMC深度操作指南:解锁mmc-utils的20个高阶应用场景 当你的Android设备出现存储性能下降、分区异常或安全验证需求时,系统自带的工具往往束手无策。此时,一个被低估的神器mmc-utils正躺在Linux内核源码树中等待被唤醒——它不仅能够读取eMMC芯…...
Madgwick算法详解:9轴IMU嵌入式姿态解算实战
1. Madgwick姿态解算算法库深度解析:面向9轴IMU的嵌入式实时姿态估计实现1.1 算法背景与工程定位Madgwick姿态解算算法由Sebastian Madgwick于2010年提出,是一种基于梯度下降优化的互补滤波器(Complementary Filter),专…...
终极指南:如何用Locale Emulator轻松解决Windows多语言软件兼容性问题
终极指南:如何用Locale Emulator轻松解决Windows多语言软件兼容性问题 【免费下载链接】Locale-Emulator Yet Another System Region and Language Simulator 项目地址: https://gitcode.com/gh_mirrors/lo/Locale-Emulator 你是否曾经因为日文游戏乱码而烦恼…...
