首页 > 其他分享 >vue2 el-input-number 千分位显示的支持(不影响v-model的数值取值)

vue2 el-input-number 千分位显示的支持(不影响v-model的数值取值)

时间:2023-10-23 15:15:30浏览次数:42  
标签:el 千分 数值 number value input replace

<!-- 增加v-thousands指令 -->
<el-input-number
    v-model="row.money"
    v-thousands
    :controls="false"
    :min="0"
    :precision="2"
    style="width: 100%"

  

// 添加全局指令或局部指令
    directives: {
      thousands: {
        inserted: function (el) {
          // 获取input节点
          if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
            el = el.getElementsByTagName('input')[0]
          }
 
          // 初始化时,格式化值为千分位
          const numberValue = parseFloat(el.value.replace(/,/g, ''))
          if (!isNaN(numberValue)) {
            el.value = numberValue.toLocaleString('zh', {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })
          }
 
          // 聚焦时转化为数字格式(去除千分位)
          el.onfocus = () => {
            el.value = parseFloat(el.value.replace(/,/g, '')).toFixed(2)
          }
 
          // 失去焦点时转化为千分位
          el.onblur = () => {
            const onBlurValue = parseFloat(el.value.replace(/,/g, ''))
            if (!isNaN(onBlurValue)) {
              el.value = onBlurValue.toLocaleString('zh', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })
            }
          }
        },
      },
    },

  

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

<style lang="scss" scoped>
  ::v-deep .el-input-number .el-input__inner {
    text-align: right;
  }
</style>

  

   

标签:el,千分,数值,number,value,input,replace
From: https://www.cnblogs.com/fdxjava/p/17782479.html

相关文章

  • Laravel开源免费的第三方订阅扩展包
    在Laravel中添加订阅功能,您可以使用以下一些开源免费的第三方扩展包:LaravelCashier:LaravelCashier是Laravel官方提供的扩展包,用于处理订阅和付款相关的功能。它集成了多个支付网关(如Stripe、Braintree等),可以轻松地实现用户订阅、付款和取消订阅等操作。LaravelSub......
  • 题解:【CF1888E】 Time Travel
    题目链接刚从modinte那里学到的广义dijkstra。注意到一定不会有路径形如\(x\toy\tox\),这样等价于\(x\)在原地等上两个时刻,我们记\(d_i\)表示到达\(i\)节点需要的最少时间。建图,边权为当前这一条边在哪一个历史时刻。然后用一个set来存下每个历史时刻在第几次时间......
  • laravel:中间件给controller传递参数(10.27.0)
    一,相关文档https://learnku.com/docs/laravel/10.x/middleware/14846二,php代码1,middleware12345678910111213141516171819202122232425<?php namespaceApp\Http\Middleware; useClosure;useIlluminate\Http\Request;useS......
  • 《安富莱嵌入式周报》第321期:开源12导联便携心电仪,PCB AI设计,150M示波器差分探头,谷歌
     视频版:https://www.bilibili.com/video/BV1ju4y1D7A8/1、开源12导联便携心电仪https://voltagedivide.com/2017/10/14/psoc-design-and-implementation-of-a-12-lead-portable-ecg/这个开源有完整的上位机,下位机和原理图,并且有一个详细的设计论文。12导联心电图是心电图检查中常......
  • Elasticsearch_exporter + Prometheus + Grafana监控之搭建梳理
    一、安装elasticsearch_exporter并启动1.1官网下载elasticsearch_exporter的安装包,地址如下:如果是Linux系统,建议安装此版本:elasticsearch_exporter-1.3.0.linux-amd64.tar.gzhttps://github.com/prometheus-community/elasticsearch_exporter/releases1.2上传安装包到服务......
  • 视频直播系统源码,在Laravel中自定义模板函数 并在模板中调用
    视频直播系统源码,在Laravel中自定义模板函数并在模板中调用第一步:在app/bootstrap下定义一个php文件 diy_helpers.php​内容如下: <?phpfunctioncssVersion($data){  $version="1.01";  return$data."?v=".$version;}functionjsVersion($data){  $ver......
  • 太省劲了!【原创工具】Excel批量生成短视频,短视频创作者的福音!
     优爱酷原创文章:《玩转短视频下载》实战连载《玩转短视频下载》实战连载№1:通用手机缓存法,看得到视频即可获得到。附工具app安装包apk下载。优爱酷原创图文视频教程《玩转短视频下载》实战连载№2:通用手机抓包法,有网络即可获得到,不止视频。附工具app安装包apk下载。优爱......
  • laravel:单元测试之http测试(10.27.0)
    一,相关文档:https://learnku.com/docs/laravel/10.x/http-tests/14896二,php代码:1,创建test程序liuhongdi@lhdpc:/data/laravel/dignews$phpartisanmake:testNewsTest   INFO  Test[tests/Feature/NewsTest.php]createdsuccessfully.2,代码:12345......
  • jenkins 原理篇——pipeline流水线 声明式语法详解
    大家好,我是蓝胖子,相信大家平时项目中或多或少都有用到jenkins,它的piepeline模式能够对项目的发布流程进行编排,优化部署效率,减少错误的发生,如何去写一个pipeline脚本呢,今天我们就来简单看看pipeline的语法。先拿一个helloworld的pipeline脚本举例,我们来看看pipeline脚本的组成......
  • 通过pandas读取excel数据,很多数据开头带有'特殊字符,如何处理?
    大家好,我是皮皮。一、前言前几天在Python最强王者群【wen】问了一个Pandas数据处理的问题,一起来看看吧。请教问题:通过pandas读取excle数据,很多数据开头带有'特殊字符,我用replace或者strip()函数处理均无法处理。......