程序员经验分享-hwhale

Vue自定义InputNumber 计数器组件

2023-11-19

1.为什么要自己封装一个InputNumber 计数器组件？

因为原始的el-element的el-input-number组件有问题：

  1. 原生组件能输入英文，不能限制只能输入数值；
  2. 原始组件能通过键盘上的删除按钮，将数据全部删除，若提交表单的话，就会将一个空值提交给后端，这是错误的，所以前端还要给组件做非空校验，比较麻烦；
  3. 原始组件必须要失焦才能触发数据更新，若我们在更改数值后，没有点击失焦，而是直接点击确认提交表单，此时我们以为我们已经将数值改变了，其实数值没有改变，数值还是改变之前的值，若此时刷新页面的话，就能看到数值没有更新，所以必须要在更改数值后失焦，才能将数值更改成功；操作起来比较麻烦；
  4. 假如给原始组件设定了最大值和最小值，但是我们依旧可以输入大于最大值或小于最小值的数值，也只有让组件失焦，才能触发数值的范围校验。操作起来也不是很方便，在失焦前就应该不允许输入不合法的数值，这样才合理。

2.基于以上原因，决定自己封装一个 InputNumber 计数器组件：

代码如下：（没办法，只能截图，大家将就一下看吧）

在这里插入图片描述

3.引用该自定义组件

在这里插入图片描述

4.全局组件引用定义

在这里插入图片描述

5.有几个我认为重点的地方讲一下

1. 我这个定义的是一个全局组件，所以不需要每次都在使用的vue页面单独引用，比较方便；若想要单独引用，可以看下面其它的案例；

Vue自定义InputNumber 计数器组件
自定义计数器组件le-input-number

2. 组件中的 <button>一定要加 type=“button”，否则每次点击这个按钮的时候，执行完button的click事件后，会自动的重新刷新一下当前的页面。

原因：
button,input type=button按钮在IE和w3c，firefox浏览器区别：

  • 1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。
  • 2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

解决Button按钮点击后自动刷新页面的问题

3. 当调用该组件时，v-model 传递给该组件的值，可能是 Number 类型，也可能是 String 类型，所以子组件接受父组件的值 value 的类型必须要定义为 [Number, String]，default 0 默认值类型为定义在前面的 Number 类型，[Number, String] 顺序也不能变，变了就会报类型转换错误；也不能写成 Number | String 这种方法，虽然不会报错，但是 VS 编译器会报警告，如果不在乎警告，也可以这么写，实际使用不影响效果。

vue3 props 如何接受多个类型?

4. 在 watch: {} 中监视 counter_num 值的变化，若值改变了，就执行watch: {} 中的逻辑，使用 .replace() 和正则将数据中的非数字的输入去掉，只允许输入数字，若输入值大于了最大值，则将输入值重置为最大值，若若输入值小于了最小值，则将输入值重置为最小值。然后通过$emit('change', this.counter_num)通知父组件调用change方法，将父组件中 formData.autoAofRewitePercentage值改为最新修改后的值this.counter_num，实现了双向绑定。
5. 在 watch: {} 中监视 value 值的变化，当父组件传递过来的 value 值改变时，就执行watch: {} 中的逻辑，及时将 value 值重新赋给 counter_num ，及时将新值回显到 <input> 中，而且此时 counter_num 值的改变也会触发 watch: {} 中 counter_num 值的监控逻辑。
6. 在 <div class="input_num" :class="{'disabled': disabled}"> 中的 :class="{'disabled': disabled}" 意思是，当 disabled 为true时，:class=“disabled”，此时该 div 的 class="input_num disabled"；若disabled 为false时，则 :class 为空，那此时该 div 的 class="input_num"。
7. 这是css的属性选择器，[属性名=属性值] 选择含有指定属性和属性值的元素。这段css的意思是，当 .input_num 元素中的 class 属性的值为 “input_num” 时，执行该css代码，鼠标移入时该组件的边框就会变成紫色。

在这里插入图片描述

8. 当 该组件被禁用时，即父组件传递给子组件的 disabled = true 时，该子组件置灰且不可操作，鼠标移入时出现禁用图标。

因上所述，当 disabled = true 时，<div class="input_num" :class="{'disabled': disabled}"> 中的 class="input_num disabled"；那么下图中的元素选择器能够选择到对应的元素，并执行css代码。

cursos: not-allowed; 出现禁用图标；
color: #cccccc; 置灰；
pointer-events: none; 元素不对指针事件做出反应（即禁用鼠标操作）；

在这里插入图片描述

若禁用该组件的鼠标操作后，鼠标移入时，无法出现禁用图标，则请看下面网址中的解释：
cursor: not-allowed，pointer-events: none不能同时使用
CSS3中pointer-events属性和cursor属性-使用案例
css 鼠标经过显示禁止符号

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

前端

javascript

Vue自定义InputNumber 计数器组件 的相关文章

随机推荐

  • 解决Android SDK / Android Studio（IntelliJ IDEA）更新不了（被墙）的问题

    昨天更新android sdk时 发现developer android com被墙了 手上也没有代理 再者android sdk manager更新有个不太好的地方是 只有一台机更新还好 但如果有多台机要更新 每台机都要重新下载一遍 那效

  • 神秘又强大的@SpringBootApplication注解

    一 前言 大部分的配置都可以用Java类 注解来代替 而在SpringBoot项目中见的最多的莫过于 SpringBootApplication注解了 它在每个SpringBoot的启动类上都有标注 这个注解对SpringBoot的启动和自

  • 解决VSCode中查看ESP32日志乱码

    问题现象 在VSCode的Monitor中查看ESP32输出的日志乱码 如下图 原因 在VSCode中IDF默认的Monitor串口波特率为460800 然而ESP32输出Log的串口波特率默认为115200 因串口波特率不匹配导致Moni

  • 墙裂推荐！pycharm装上这 14 个插件后，简直就是无敌的存在！！

    pycharm是一款强大的python集成开发环境 带有一整套python开发工具 今天就给大家介绍几款非常好用的插件 首先插件的下载方法 进入File gt Settings gt Plugins 根据需要搜索插件名称 记得是在Marke

  • jmeter 安装配置

    一 进入官网 http jmeter apache org 1 第一步进入官网如下图 2 选择进行下载 下载下来为一个压缩包 解压即可 3 下载完成后 然后就进行解压 要注意版本对应的java要求 解压完成后就要配置环境变量了 4 环境变量

  • C++中的compare比较字符串

    在C语言中的字符串比较使用的strcmp函数 但在C 中使用的是compare函数 格式 字符串A compare 字符串B 其中还可以指定子串比较 格式 A compare 0 3 B 4 3 说明字符串A中的从下标为0开始的3个字符和字

  • java中的NIO和IO

    今天看到一篇文章 其中提到了NIO 之前没使用过 今天拿出来学习下 做个个人分享 IO指的是流式处理 I对用的是Input O对应的是OutPut 也就是我们常用的IO IO流的数据来源可以是键盘 文件 网络等等 下面是其类图的划分 具体这

  • html字符实体

    比如我们想在网页上面显示一个 lt 小于符号 但是 lt 在HTML中是文档标记的开始语言 如果我们直接使用 lt 会出差错 所以我们就会一些实体名称来代替 显示结果 描述 实体名称 实体编号 空格 nbsp 160 lt 小于号 lt 6

  • python 无向图的生成

    import random n int input please input n m int input please input m v int input please input vote print int random unifo

  • Oracle联合查询详解

    联合查询 多表连接 概念 多张表连接 合并查询数据 分类 1 笛卡尔积连接 交叉连接 语法 select t1 column1 t1 column2 t2 column1 t2 column2 from table name1 t1 cro

  • CentOS在线安装MySQL，超细，易上手（附GPG密钥过期解决办法）

    MySQL 在线安装MySQL 1 下载 root localhost wget https dev mysql com get mysql57 community release el7 11 noarch rpm 2018 01 08

  • C++之模板实例化

    模板可以分为类模板与函数模板 它们的声明形式分别为 template

  • Docker下使用jstat查看jvm的GC信息

    Jstat指令 jstat命令命令格式 jstat Options vmid interval count 参数说明 Options 选项 我们一般使用 gcutil 查看gc情况 vmid VM的进程号 即当前运行的java进程号 int

  • read和write函数

    read ssize t read int fd void buf size t count fd 文件描述符 通过open获得 buf 需要读取的数据的存放位置 数组的地址 count 指定数组的大小 返回值 成功 gt 0 返回实际读取

  • 深入理解 Flutter 图片加载原理

    前言 随着Flutter稳定版本逐步迭代更新 京东APP内部的Flutter业务也日益增多 Flutter开发为我们提供了高效的开发环境 优秀的跨平台适配 丰富的功能组件及动画 接近原生的交互体验 但随之也带来了一些OOM问题 通过线上监控

  • 如何用视频制作gif动图？4种制作教学方法

    GIF动图以循环播放的形式呈现 相比于完整的视频内容 它可以将重要的瞬间或关键帧提取出来 从而简化和精简内容 所以说 动图比我们原本的视频文件呈现的内容更为活泼 生动 通过视频制作GIF动图 我们还可以运用编辑工具对视频中的场景进行裁剪 缩

  • 使用Python绘制粽子消消乐，素描图（优化版，正常/漫画/写实风格），词云图，字符画图及提取轮廓

    使用Python绘制粽子消消乐 素描图 优化版 正常 漫画 写实风格 词云图 字符画图及提取轮廓 1 效果图 2 源码 2 1 素描图源码 2 2 优化版 制作不同风格的素描图 正常 漫画 写实风格 https blog csdn net

  • 关于制作rpm包的patch的方法

    原文链接 http blkart blog 51cto com 1142352 1542533 1 准备工作 安装rpm build软件包 2 生成rpmbuild目录 以root用户登陆 执行命令 rpmbuild ba abc spec

  • 详解接口加密了怎么测？

    1 定义加密需求 确定哪些数据需要进行加密 这可以是用户敏感信息 密码 身份验证令牌等 确定使用的加密算法 如对称加密 如AES 或非对称加密 如RSA 2 生成密钥 对称加密 生成一个密钥 确保密钥的安全性和随机性 可以使用密钥生成库或算

  • Vue自定义InputNumber 计数器组件

    1 为什么要自己封装一个InputNumber 计数器组件 因为原始的el element的el input number组件有问题 原生组件能输入英文 不能限制只能输入数值 原始组件能通过键盘上的删除按钮 将数据全部删除 若提交表单的话

热门标签