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

输入框输入数字且保持精度

在项目中如果涉及到金额等需要数字输入且保持精度的情况下,由于输入框是可以随意输入文本的,所以一般情况下可能需要监听输入框的change事件,然后通过正则表达式去替换掉不匹配的文本部分。

由于每次文本改变都会被监听,包括替换文本也会被监听,不止代码冗杂,还容易浪费性能。那么此时我们可以利用饿了么的组件去完成这一个简单的配置。

这里用的组件是InputNumber 计数器。

// :controls="false" 用于取消控制按钮,让输入框保持纯粹
// :precision="2" 控制保持两位小数的精度
<el-input-number size="mini" v-model="scope.row.sl" :controls="false" :precision="2" ></el-input-number>

由于计数器的默认输入是居中的,但是一般输入的文本都是居左的,饿了么组件没有提供这种属性控制,所以可以从CSS样式中入手。

::v-deep .el-input-number.is-without-controls .el-input__inner {
    text-align: left !important;
}

个人博客:苏恩博客

相关文章:

  • 【工具变量】全国各省及地级市绿色金融指数数据集(2000-2023年)
  • OpenGL学习笔记(模型材质、光照贴图)
  • 树莓派llama.cpp部署DeepSeek-R1-Distill-Qwen-1.5B
  • Gerapy二次开发:用户管理专栏页面样式与功能设计
  • OpenStack Yoga版安装笔记(十七)安全组笔记
  • 每日c/c++题 备战蓝桥杯(求解三个数的最大公约数与最小公倍数)
  • CANoe CAPL——Ethernet CAPL函数
  • btrfs , ext4 , jfs , xfs , zfs 对比 笔记250406
  • 前端知识-CSS3
  • Java Properties 类详解
  • 基于winform的串口调试助手
  • Nginx负载均衡时如何为指定ip配置固定服务器
  • 25.6 多模态AI类型系统实战:日均10万请求下的99.99%可靠性保障与10倍性能提升
  • 《Java八股文の文艺复兴》第十篇:量子永生架构——对象池的混沌边缘
  • C# 属性(Property)
  • 双向链表示例
  • FreeRTOS任务创建和删除(静态)
  • 蓝桥杯嵌入式比赛的做题步骤总结!
  • Elastic 的 OpenTelemetry 分发版(EDOT)现已正式发布:开源、可用于生产环境的 OTel
  • 【HFP】蓝牙HFP应用层核心技术研究
  • 网络软文推广网站/网络推广工作好吗
  • 如何申请域名做网站知乎/万网域名注册查询
  • 交做网贷的网站/平台代运营是什么意思
  • 建筑网站大全豆丁网/百度提升排名
  • 网站开发 公司简介/常州网站关键词推广
  • 湖州市南浔区建设局网站/seo网站优化工具大全