码农知识堂 - 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:

  • 相关阅读:
    使用python操作mysql,,SQL注入问题, 视图, 触发器 ,事务(掌握重点), 存储过程,索引 问题
    升级gradle后。需要修改jenkin 编译java版本从1.8 到11
    协同存储,为边缘计算创造更大价值
    【MATLAB教程案例17】基于NSGAII多目标优化算法的matlab仿真及应用
    python数据分析—删除value=0的行
    JVM分析GC日志
    泰拉瑞亚EasyBuildMod便捷建造模组开发详细过程
    java 版本企业招标投标管理系统源码+功能描述+tbms+及时准确+全程电子化
    京东云开发者|软件架构可视化及C4模型:架构设计不仅仅是UML
    xss过滤绕过笔记
  • 原文地址:https://blog.csdn.net/weixin_37893243/article/details/132631137
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号