vue2 el-input-number 千分位显示的支持(不影响v-model的数值取值)
1 2 3 4 5 6 7 8 | <!-- 增加v-thousands指令 --> <el-input-number v-model= "row.money" v-thousands :controls= "false" :min= "0" :precision= "2" style= "width: 100%" |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | // 添加全局指令或局部指令 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:
1 2 3 4 5 | <style lang= "scss" scoped> ::v-deep .el-input-number .el-input__inner { text-align: right; } </style> |
vue element el-input格式化显示自定义指令;支持千分位格式化、百分比格式化,支持自定义格式化
el-input自定义格式化展示指令示例,自定义格式化可修改formatter格式化函数与parse解析函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | // el-input格式化自定义指令 /** * @name inputFormatter * @msg: el-input格式化自定义指令 * @param {Function} formatter 格式化函数 * @param {Function} parser 解析函数 * @param {Function} limit 输入限制函数 * @param {Boolean} watchInput 是否监听input事件格式化显示 * @param {Boolean} isNumber 是否为数字类型输入框(小数) * @returns 返回自定义指令生命周期函数 */ const inputFormatter = ({ formatter = (e) => e, parser = (e) => e, limit = (e) => e, watchInput = true , isNumber = false }) => { return (el, binding, vnode) => { let watchVal = true const input = $(el).find( ".el-input__inner" )[0] // 获取记录光标位置 let selectionSite let getSelectionSite = (event) => { let oldVal = event.target.value || '' let selectionStart = event.target.selectionStart selectionSite = oldVal.length - selectionStart } // 点击、键盘事件更新光标位置 el.addEventListener( "click" , getSelectionSite) el.addEventListener( "keyup" , getSelectionSite) //为input绑定值赋值 const assignment = (val) => { vnode.componentInstance.$emit( 'input' , parser(val)) } // 更改显示的值 const upShow = (val) => { vnode.context.$nextTick(() => { input.value = val }) } // 监听绑定值变化 vnode.componentInstance.$watch( 'value' , val => { if (watchVal) { upShow(formatter(val)) } }, { deep: true , immediate: true }) // 数字格式化 let toNumber = (val) => { val = val.toString().replace(/[^\d^\.^\-]+/g, "" ) // 第二步:把不是数字,不是小数点、-的过滤掉 .replace(/^0+(\d)/, "$1" ) // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字 .replace(/^\./, "0." ) // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全 .replace( "." , "$#$" ).replace(/\./g, "" ).replace( "$#$" , "." ) // 只保留第一个".", 清除多余的"." // .match(/^\d*(\.?\d{0,9})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有1到9位小数 return val } // 处理最后一位非法字符 const handlerIllegalStr = (str) => { while (!(/^[0-9]+.?[0-9]*/.test(str.charAt(str.length - 1))) && str) { str = str.substr(0, str.length - 1) } return str || '' } // 监听input事件,可添加操作 el.addEventListener( "input" , (event) => { let selectionStart = input.selectionStart let val = event.target.value if (binding.modifiers.number || isNumber) { val = toNumber(val) } let inp = limit(val) event.target.value = inp if (binding.modifiers.watchInput || watchInput) { assignment(inp) upShow(formatter(parser(val))) } setTimeout(() => { if (selectionSite && input.value.length != selectionStart) { input.selectionStart = input.selectionEnd = input.value.length - selectionSite } }, 0) }) if (input) { input.addEventListener( "blur" , (event) => { watchVal = true let val = event.target.value; if (binding.modifiers.number || isNumber) { val = handlerIllegalStr(val) } assignment(val) }) input.addEventListener( "focus" , (event) => { watchVal = false }) } } } 使用方式 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 千分位显示指令 // 千分位指令 Vue.directive( 'thousands' , { inserted: inputFormatter({ // 格式化函数 formatter(num) { num = num.toString() let num1 = num.split( "." )[0], num2 = num.split( "." )[1]; let c = num1.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,' ); return num.toString().indexOf( "." ) !== -1 ? c + "." + num2 : c; }, // 解析函数 parser(val) { val = val.toString().replace(/,/g, "" ) return val }, isNumber: true }) }); 百分比显示指令 // 百分比指令 Vue.directive( 'percentage' , { inserted: inputFormatter({ // 格式化函数 formatter(val) { val = val.toString() let m = 0 try { m = val.split( "." )[1].length } catch (e) { } return Number(val.replace( "." , "" ) * 100) / Math.pow(10, m) }, // 解析函数 parser(val) { val = val.toString() let l1 = 0, m try { l1 = val.split( "." )[1].length; } catch (e) { } m = Math.pow(10, l1); return Number(val.replace( "." , "" )) / (100 * m); }, watchInput: false , isNumber: true }) }); //千分位 <el-input v-model= "paramFormData.initSpotPrice" v-thousands></el-input> //百分比 <el-input v-model= "paramFormData.initSpotPrice" v-percentage></el-input> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
2020-10-23 演示js异步,同步请求,响应解码