WEB前端开发技术杂谈

Elementui input框展示千分位

2021-10-17  本文已影响0人  林玲玲的笔记
//html内容
<el-input  v-model="money" type="number" placeholder="请输入内容"  autosize  v-money:2></el-input>

//设置局部指令
directives: {
            money: {
                // 指令的定义
                inserted: function (el, binding) {
                    // 指令作用在 element-input 节点,对应原生 div.el-input (真实input节点的父节点)
                    if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
                        el = el.getElementsByTagName('input')[0]
                    }
                   //带¥符号、保留2位小数+千分位
                   // el.value = (Number(el.value)).toLocaleString('zh', {style:'currency', currency: 'CNY', minimumFractionDigits: 2});
                   //保留2位小数+千分位
                    el.value = parseFloat(el.value).toLocaleString(underfined,{'minimumFractionDigits':2,'maximumFractionDigits':2});
                    el.onblur = (e) => {
                        let a = el.value.replace(/,/g,'');  //去除‘,’
                        if(a){
                            el.value = parseFloat(el.value).toLocaleString(underfined,{'minimumFractionDigits':2,'maximumFractionDigits':2});
                        }
                    }
                },
            }
        },

//toLocaleString() 是js原生自带的一个方法,除了处理金额、数字、还能处理时间格式。
上一篇 下一篇

猜你喜欢

热点阅读