当前位置: 首页 > news >正文

实现 vue3 正整数输入框组件

1.实现代码

components/InputInteger.vue

<!-- 正整数输入框 -->
<template><el-input v-model="_value" @input="onInput" maxlength="9" clearable />
</template><script lang="ts" setup>
import { ref } from "vue";const props = withDefaults(defineProps<{modelValue?: number | string;min?: number;max?: number;}>(),{min: 1}
);
const emit = defineEmits(["update:modelValue"]);const _value = ref(props.modelValue);const onInput = (val: string | undefined) => {const result = verifyValue(val); // 拦截输入,进行校验_value.value = result;emit("update:modelValue", result);
};const verifyValue = (value: string | undefined): number | string | undefined => {const { max, min } = props;let result = value;let newVal = Number(value);if (isNil(value) || Number.isNaN(newVal) || hasDot(value)) {return props.modelValue; // 保持输入前的数值}if (value === "") {return undefined;}if (max && newVal > max) {result = String(max);}if (min && newVal < min) {result = String(min);}return result;
};// 判断null或undefined
const isNil = (value: any) => {return value == null;
};// 判断是否包含.字符
const hasDot = (value: any) => {return String(value).includes(".");
};
</script>

2.全局引入

main.ts

const app = createApp(App);app.config.errorHandler = errorHandler;// register the global component
app.component("InputInteger", InputInteger);

3.TS类型声明

src/typings/global-components.d.ts

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Read more: https://github.com/vuejs/core/pull/3399
export {};declare module "vue" {export interface GlobalComponents {InputInteger: (typeof import("../components/InputInteger.vue"))["default"];}
}

4. 配置 JSX/TSX 类型推断

参考:https://cn.vuejs.org/guide/extras/render-function.html#jsx-type-inference

tsconfig.json

{"compilerOptions": {"jsx": "preserve","jsxImportSource": "vue" // 指定了 TypeScript 编译 JSX 时应该从哪个库(vue/react)导入 JSX 工厂函数// ...}
}

相关文章:

实现 vue3 正整数输入框组件

1.实现代码 components/InputInteger.vue <!-- 正整数输入框 --> <template><el-input v-model"_value" input"onInput" maxlength"9" clearable /> </template><script lang"ts" setup> import { ref …...

Leetcode - 周赛425

目录 一&#xff0c;3364. 最小正和子数组 二&#xff0c; 3365. 重排子字符串以形成目标字符串 三&#xff0c;3366. 最小数组和 四&#xff0c;3367. 移除边之后的权重最大和 一&#xff0c;3364. 最小正和子数组 本题可以直接暴力枚举&#xff0c;代码如下&#xff1a; …...

c++(斗罗大陆2)

我把魂力等级更新到了31级 #include<iostream> #include<conio.h> #include<windows.h> #include<stdlib.h> #include<stdio.h> #include<time.h> #include<string.h> using namespace std; int qs10; int xthl0;//先…...

redis常见数据类型

Redis是一个开源的、内存中的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息代理&#xff0c;支持多种数据类型。 一、数据类型介绍 String&#xff08;字符串&#xff09; Redis中最基本的数据类型。可以存储任何类型的数据&#xff0c;包括字符串、数字和二进制…...

MySQL - 性能优化

使用 Explain 进行分析 Explain 用来分析 SELECT 查询语句&#xff0c;开发人员可以通过分析 Explain 结果来优化查询语句。 比较重要的字段有: select_type : 查询类型&#xff0c;有简单查询、联合查询、子查询等 key : 使用的索引 rows : 扫描的行数 type &#xff1a;…...

Linux进程概念-详细版(一)

目录 进程概念 描述进程-PCB task_struct-PCB的一种 task_struct内容分类 查看进程 通过系统目录查看 通过ps命令查看 通过系统调用获取进程的PID和PPID 通过系统调用创建进程 fork的认识 使用if进行分流 最后的总结 Linux进程状态 运行状态-R 浅度睡眠状态-S 深度睡…...

K8S网络系列--Flannel网络下UDP、VXLAN模式的通信流程机制分析

文章目录 前言一、了解overlay、underlay容器网络二、网络通信1.分类2.网络虚拟设备对2.1、什么是网络虚拟设备对veth pair?2.2、如何查看容器的网卡与主机的哪个veth设备对是成对的关系? 3、vxlan和vtep3.1、vtep3.2、vxlan相关概念 三、Flannel网络模式剖析0、flannel的作用…...

ThreadLocal的设计思考

问题的提出 在Java多线程中&#xff0c;共享变量的读写非常容易出现不可预测的行为&#xff0c;因此对共享变量的访问控制非常重要。因此在多线程编程时&#xff0c;为了保证线程安全&#xff0c;需要进行额外的同步措施。比如典型的操作就是加锁。除了加锁外&#xff0c;另一…...

shell脚本练习(2)

1. 使用case实现成绩优良差的判断 2. for创建20用户 用户前缀由用户输入 用户初始密码由用户输入 例如&#xff1a;test01,test10 3. for ping测试指网段的主机 网段由用户输入&#xff0c;例如用户输入192.168.2 &#xff0c;则ping 192.168.2.10 --- 192.168.2.2…...

通讯专题4.1——CAN通信之计算机网络与现场总线

从通讯专题4开始&#xff0c;来学习CAN总线的内容。 为了更好的学习CAN&#xff0c;先从计算机网络与现场总线开始了解。 1 计算机网络体系的结构 在我们生活当中&#xff0c;有许多的网络&#xff0c;如交通网&#xff08;铁路、公路等&#xff09;、通信网&#xff08;电信、…...

Harmony NEXT-越过相机读写权限上传图片至项目云存储中

问题成因 在制作用户注册登录界面时想要实现用户头像上传共能&#xff0c;查询API文档&#xff0c;发现有picker和PhotoAccessHelper两个包可以选择使用&#xff0c;但是在使用PhotoAccessHelper包拉起相册并读入所选的照片后将该照片传入云存储中产生报错&#xff0c;需要相册…...

MATLAB基础应用精讲-【数模应用】Retinex图像去雾算法(附MATLAB和python代码实现)

目录 前言 算法原理 图像去雾 数学模型 算法步骤 算法拓展 多尺度Retinex (MSR) 算法 MSR算法的实现细节 McCann Retinex 算法 McCann99 Retinex算法 基于暗通道先验的图像去雾算法 暴力解法——直方图均衡化去雾 基于Retinex理论的图像去雾 基于暗通道先验的单…...

点击A组件跳转到B页面的tab的某一列

1、使用vuex存储点击的数据&#xff1b; 点击A组件里面的button按钮&#xff1a; <div><button click"banli(first)">已办理</button><button click"banli(second)">未办理</button><button click"banli(third)&quo…...

HarmonyOS xml转换JavaScript 常用的几个方法

HarmonyOS 使用 xml转换JavaScript 的好处 易用性&#xff1a; 提供了简洁的API接口&#xff0c;使得XML到JavaScript对象的转换变得简单直接。转换选项的灵活性允许开发者根据实际需求自定义转换结果。 高效性&#xff1a; HarmonyOS对底层运行时环境进行了优化&#xff0c;使…...

Linux笔记---进程:进程等待

1. 进程等待的概念 进程等待是指父进程通过系统调用wait或waitpid来对子进程进行状态检测与回收的功能。 当子进程退出时&#xff0c;如果父进程不读取子进程的退出状态&#xff0c;子进程就会成为僵尸进程&#xff0c;造成内存泄漏的问题。因此&#xff0c;父进程需要调用wa…...

【Linux】匿名管道通信场景——进程池

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;Linux系统编程 这里将会不定期更新有关Linux的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389; 文章目…...

算法妙妙屋-------1.递归的深邃回响:全排列的奇妙组合

全排列的简要总结 全排列&#xff08;Permutation&#xff09;是数学中一个经典的问题&#xff0c;指的是从一组元素中&#xff0c;将所有元素按任意顺序排列形成的所有可能序列。 特点 输入条件&#xff1a; 给定一组互异的元素&#xff08;通常为数组或字符串&#xff09;。…...

【maven-6】Maven 生命周期相关命令演示

Maven 是一个广泛使用的项目管理工具&#xff0c;尤其在 Java 项目中。它通过定义一系列的生命周期阶段&#xff08;Phases&#xff09;来管理项目的构建过程。理解这些生命周期阶段及其相关命令&#xff0c;对于高效地构建和管理项目至关重要。本文将通过实际演示&#xff0c;…...

黑马程序员Java笔记整理(day06)

1.继承的特点 2.继承的权限 3. 4.小结 5.方法重写 6.子类构造器 7.兄弟构造器 8.多态 9.小结...

LeetCode【代码随想录】刷题(动态规划篇)

509. 斐波那契数 力扣题目链接 题目&#xff1a;斐波那契数&#xff08;通常用F(n)表示&#xff09;形成的序列称为斐波那契数列 。该数列由0和1开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

全面解析数据库:从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...