金额输入框，用于充值提现

小彭的前端成长日记丶

关注

已于 2022-02-23 15:35:39 修改 · 697 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

vue封装金额输入的input框前言：写vue管理系统的时候，总是会遇到金额输入框，网上找到的总是能发现一些隐蔽bug。所以小编就想能不能封装一个element-ui中el-input的金额输入框呢？说干就干，上效果小编这里一共封装了5中用法，基本是够使用的了，而且是支持element属性的，好了。其他的就不说了，直接上代码。第一步： 1.在components中新建文件夹currency，新建index.js import Currency from './src/currency.vue' Currency.. 阅读详情

封装成一个函数，挂到Vue原型上

// 金额输入
function cash(e){
	let price = e.toString()
	// 直接输入小数点时转化为'0.'
	if(price.indexOf('.') == 0){
		price = price.replace(/[^$#$]/g,'0.')
	}
	// 首位多个0转化成一个
	price = price.replace(/^0{1,}/g,'0')
	// 连续多个小数点转化成一个
	price = price.replace(/\.{2,}/g,'.')
	// 只能有两位小数
	price = price.match(/^\d*\.?\d{0,2}/g)[0]
	return price
}
Vue.prototype.$cash = cash

监听输入框的输入事件

input(e){
    this.$nextTick(() => {
		this.cash = this.$cash(e)
	})
},

标签

#vue.js #elementui #前端 #javascript

【产品经理修炼之道】-支付系统功能介绍：个人APP 第三方支付个人APP以用户便捷支付为核心，满足第三方支付系统用户的支付需求。实现支付、充值、生活、娱乐为一体，满足第三方支付平台用户的支付需求，提高用户支付体验，提升第三方支付用户的幸福，实现一站式支付服务体验。推荐使用Microsoft Word 2010及以上版本，使用视图-导航窗格模式浏览文档，以获得最佳体验。银行转账业务流程话费充值。阅读详情

0

小彭的前端成长日记丶

博客等级

码龄5年 33粉丝 · 30原创

+ 关注

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。