使用iviewui组件库的坑

news2024/11/13 18:14:45

背景

使用view-design组件库的Input组件的时候,按照产品的要求,输入框中只能键入正整数。

使用效果

  1. 如果直接使用组件的type属性,设置类型为number时,乍一看没啥问题,但是当我们键入 小数点(.) 或者 e/E 后面没有跟任何数字时,会发现我们的input或者change回调函数中,根本就没有小数点这个字符,还有很多字符都会对这个限制(输入框中只能键入正整数)有影响,不建议使用这中方案
    在这里插入图片描述
    以上是示例的输出结果,我们可以明显的发现,在键入小数点,返回值中没有小数点,当再输入一个数值,小数点才会显现出来。

    原因:
    任何数字都是可接受的值,只要它是有效的浮点数w3c的官方解释:什么是有效浮点数

  2. 我们使用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,完美解决。
有一说一,名声高还是有一定实力的。

写在最后

当我们发现某些行为出乎意料时,首先看看我们使用的工具是否鲁棒性够好,在简单的问题上,不要过于怀疑我们自己的问题

如果有帮助到大家,不管是问题本身还是思维方式,都希望大家可以点个赞支持下博主!!!

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

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

相关文章

AI绘图最强软件stable diffusion,一文带你迅速了解!

有需要stable diffusion整合包可以扫描下方,免费获取 01 — 什么是 SD ​ Stable Difusion(简称 SD) 其三种概念。 1.用来指代稳定扩散(Stable Diffusion) 技术,如 Midjourney是基于Stable Difusion技术实现的就是指它运用了 Stable Diffusion 的技术原理。 …

Unity3D实现视频和模型融合效果

系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、效果展示如下👉二、VideoPlayer播放视频(一)👉2-1、Hieraechy面板右键创建videoPlayer👉2-2、Assets面板右键创建RenderTexture👉2-3、把设置好的RenderTexture拖到videoPlayer里面还有本地视频视频�…

stm32 ADC实例解析(3)-多通道采集互相干扰的问题

文章目录 一、问题现象:二、原因分析:1、测量值不准问题分析:2、采样干扰问题分析 三、解决办法:1、硬件:(1)、电源供电(2)、引脚电容(3)、减少采…

springboot 医院住院管理系统,计算机毕业设计项目源码035,计算机毕设程序(LW+开题报告、中期报告、任务书等全套方案)

摘 要 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,医院当然也不例外。医院住院管理系统是以实际运用为开发背景,运用软件工程原理和开发方法,采用J…

Redis集群模式之Redis Sentinel vs. Redis Cluster

在分布式系统环境中,Redis以其高性能、低延迟和丰富的数据结构而广受青睐。随着数据量的增长和访问需求的增加,单一Redis实例往往难以满足高可用性和扩展性的要求。为此,Redis提供了两种主要的集群模式:Redis Sentinel和Redis Clu…

谷歌浏览器的自动翻译功能如何开启

在当今全球化的网络环境中,能够流畅地浏览不同语言的网页是至关重要的。谷歌浏览器(Google Chrome)提供了一项强大的自动翻译功能,可以帮助用户轻松跨越语言障碍。本文将详细介绍如何开启和使用谷歌浏览器的自动翻译功能&#xff…

中文书籍对《人月神话》的引用(161-210本):微软的秘密

中文书籍对《人月神话》的引用(第001到160本)>> 《人月神话》于1975年出版,1995年出二十周年版。自出版以来,该书被大量的书籍和文章引用,直到现在热潮不退。 2023年,清华大学出版社推出《人月神话》…

Docker了解

Docker是一种容器化技术,它可以将应用程序和其依赖项打包到一个独立的、可移植的容器中,以便在不同的环境中运行。Docker基于Linux操作系统的容器化技术,可以提供更轻量、更快速、更灵活、更一致的应用部署和管理方式。 Docker的基本概念包括…

【LLM Agents体验 3】利用Open-WebUI+Ollama本地部署Qwen2.5:7B大模型的安装指南

Open WebUI是一种基于 Web 的用户界面,用于管理和操作各种本地和云端的人工智能模型。它提供了一个直观的图形化界面,使用户可以方便地加载、配置、运行和监控各种 AI 模型,而无需编写代码或使用命令行界面。 Open-WebUI 是一款功能强大且易于…

新Activity启动时Task的位置(分屏场景)

目录 场景 场景 当类似上面的Task状态,我们自定义的三个按钮,启动新的Activity的时候,并没有去设置需要launche的task。 Intent intent new Intent();intent.setComponent(new ComponentName("com.android.dialer","com.and…

GitLab基于Drone搭建持续集成(CI/CD)

本文介绍了如何为 Gitee 安装 Drone 服务器。服务器打包为在 DockerHub 上分发的最小 Docker 映像。 1. 准备工作 创建OAuth应用 创建 GitLab OAuth 应用。Consumer Key 和 Consumer Secret 用于授权访问极狐GitLab 资源。 ps:授权回调 URL 必须与以下格式和路径匹配&…

检测敏感词功能

今天策划给我一个任务 —— 检测昵称中是否含有敏感词功能,然后丢给我两个压缩包,我解压一看: 有的txt文件是一行一个词: 有的txt文件是按逗号分隔开: 不管是什么格式的总之量非常多,把我这辈子脏话都囊括…

【OpenGL】OpenGL简介

文章目录 OpenGL概述OpenGL的本质OpenGL相关库核心库窗口管理glutfreeglutglfw 函数加载glewGLAD OpenGL概述 OpenGL(Open Graphics Library) 严格来说,本身并不是一个API,它是一个由Khronos组织制定并维护的规范(Specification)。OpenGL规范严格规定了…

python-24-一篇文章彻底掌握Python HTTP库Requests

python-24-一篇文章彻底掌握Python HTTP库Requests 一.简介 在 Python 中,Requests 是一个非常流行且易于使用的 Python HTTP 库,专门用于发送 HTTP/HTTPS 请求,获取请求响应; 可能觉得HTTP请求不是应该前端去做么?…

SpringMVC案例学习(一)--计算器设计登录页面设计

文章目录 1.计算器1.1.html代码1.2接口设计1.3前端测试1.4接口测试 2.登录页面设计2.1接口实现2.2查看前端页面效果2.3未进行前后端交互时候的代码2.4前后端交互设计2.5个人实践遇到的问题 3.lombok介绍3.1插件安装3.2导入依赖 1.计算器 1.1.html代码 下面的这个就是我们的前…

【Linux 麒麟系统 qt 程序通过root启动 桌面程序】

通过.desktop pkexec 启动程序 关键字方案一方案二第一步 修改.desktop第二步 xxx.sh实现 注意 关键字 pkexec .desktop qt 原始需求: 用户在麒麟系统上通过快捷方式(.desktop)启动程序后绑定系统的26端口,但是因为系统权限问题,26端口普通…

DevOps-Gitlab-私有代码仓库

1. 概述 1. 私有代码仓库 2. 精细化权限配置,让系统更安全 3. 控制用户/用户组是否可以提交到主分支 (PR Push Request) 4. 它使用Ruby语言写成。后来,一些部分用Go语言重写 2. Gitlab vs Github/Gitee GitlabGithub/Gitee共同点存放代码,git访问存放代码,git访问…

【AI声音克隆整合包及教程】第二代GPT-SoVITS V2:技术、应用与伦理思考

一、引言 在当今科技迅速发展的时代,声音克隆技术成为人工智能领域的一个备受瞩目的分支。GPT-SoVITS V2作为一种声音克隆工具,正逐渐进入人们的视野,它在多个领域展现出巨大的潜力,同时也引发了一系列值得深入探讨的问题。本文旨…

重新认识HTTPS

一. 什么是 HTTPS HTTP 由于是明文传输,所谓的明文,就是说客户端与服务端通信的信息都是肉眼可见的,随意使用一个抓包工具都可以截获通信的内容。 所以安全上存在以下三个风险: 窃听风险,比如通信链路上可以获取通信…

Vite初始化Vue3+Typescrpt项目

初始化项目 安装 Vite 首先,确保你的 Node.js 版本 > 12.0.0。然后在命令行中运行以下命令来创建一个 Vite Vue 3 TypeScript 的项目模板: npm init vitelatest进入项目目录 创建完成后,进入项目目录: cd vue3-demo启动…