码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • vue2 el-input-number 千分位显示的支持(不影响v-model的数值取值)


    1. <el-input-number
    2. v-model="row.money"
    3. v-thousands
    4. :controls="false"
    5. :min="0"
    6. :precision="2"
    7. style="width: 100%"
    8. />
    1. // 添加全局指令或局部指令
    2. directives: {
    3. thousands: {
    4. inserted: function (el) {
    5. // 获取input节点
    6. if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
    7. el = el.getElementsByTagName('input')[0]
    8. }
    9. // 初始化时,格式化值为千分位
    10. const numberValue = parseFloat(el.value.replace(/,/g, ''))
    11. if (!isNaN(numberValue)) {
    12. el.value = numberValue.toLocaleString('zh', {
    13. minimumFractionDigits: 2,
    14. maximumFractionDigits: 2,
    15. })
    16. }
    17. // 聚焦时转化为数字格式(去除千分位)
    18. el.onfocus = () => {
    19. el.value = parseFloat(el.value.replace(/,/g, '')).toFixed(2)
    20. }
    21. // 失去焦点时转化为千分位
    22. el.onblur = () => {
    23. const onBlurValue = parseFloat(el.value.replace(/,/g, ''))
    24. if (!isNaN(onBlurValue)) {
    25. el.value = onBlurValue.toLocaleString('zh', {
    26. minimumFractionDigits: 2,
    27. maximumFractionDigits: 2,
    28. })
    29. }
    30. }
    31. },
    32. },
    33. },

    实现效果为获取焦点时显示数值,失去焦点显示千分位,获取v-model绑定的值为数值。如果想设置数值靠右显示,添加局部css:

  • 相关阅读:
    实现分片上传、断点续传、秒传 (JS+NodeJS)(TypeScript)
    3.RabbitMQ工作模式介绍
    大数据驱动决策:电商平台如何通过API挖掘消费者洞察
    Linux引导故障排除:从问题到解决方案的详细指南
    echarts多个关系图如何实现
    08 JUC 之 Semaphore
    如何实现多任务管理
    框架的优点(SpringBoot VS Servlet)
    Spring Cloud【服务网关Gateway(三大核心概念、入门案例、路由规则 、Java API构建路由、动态路由、断言功能详解)】(六)
    Postman接口测试工具详解
  • 原文地址:https://blog.csdn.net/weixin_37893243/article/details/132631137
  • 最新文章
  • 【FHE】我们如何实现同态加密推理(八):SiLU 的密文化——两条路径,和一个 8 字节的开关
    SQLcl 中 c/old/new 替换变量为何失效?先定位再替换
    不让模型写作文,直接从它脑子里读答案:Jev 决策在 .NET 的两条路线
    Halo插件:支持GitHub的图床附件策略
    电视投屏界的“一股清流”!SimpleTVCast 6.0.0-beta 抢先体验:无需TV端App,界面大换血!✨
    华三VXLAN集中式网关实战指南:Spine多活网关 + 双活接入(M-LAG)
    软件更好写之后口碑会更重要
    大 O、大 Omega、大 Theta 的区别,O(n) 复杂度是什么意思
    Java标签跳转:一个鲜为人知但却很实用的小技巧
    多智能体系统论文速读
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号