• 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:

  • 相关阅读:
    2023年【电工(中级)】考试题库及电工(中级)模拟考试
    SaveFileDialog.OverwritePrompt
    使用xshell linux安装nodejs,CentOS下安装并配置nodejs环境教程
    教程图文详解 - 下一代互联网(第七章)
    ScanNet数据集转rosbag的脚本
    STC32G 单片机EEPROM 操作实例
    【NodeJs-5天学习】第二天篇③ ——Express Web框架 和 中间件
    点击化学TCO-PEG-SH|TCO-PEG-Thiol|反式环辛烯-聚乙二醇-巯基
    RFLA--F
    Spring Boot 多数据源配置
  • 原文地址:https://blog.csdn.net/weixin_37893243/article/details/132631137