前言
Element UI组件绝大时候可以满足我们VUE项目实操中的需求,但总会有意想不到的功能需求需要我们去进行处理,所以记录
内容
修饰符的作用
功能展示
保留小数点后两位只能有一个小数点只能是数字不是小数0不能开头小数点前自动补0
通过代码示例完成功能
页面引用组件
绑定组件form值。
data() {
return{
form:{
money:"", //价格
}
}
}
通过绑定@input给
methods: {
//限制只能输入两位小数
limitInput(value, name) {
this.form[name] = ('' + value) // 第一步:转成字符串
.replace(/[^\d^\.]+/g, '') // 第二步:把不是数字,不是小数点的过滤掉
.replace(/^0+(\d)/, '$1') // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
.replace(/^\./, '0.') // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
.match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
},
}
总结
这样就完成了上述功能需求,编写不易,还望大家支持!需要注意的如下声明:
参数value表示输入的值,name表示匹配的对象属性;
this.form[name]表示绑定的表单form及input框绑定的属性值。
整体代码如下:
@input="limitInput($event, 'money')" />
export default {
data() {
return{
form:{
money:"", //价格
}
}
},
methods:{
//限制只能输入两位小数
limitInput(value, name) {
this.form[name] = ('' + value) // 第一步:转成字符串
.replace(/[^\d^\.]+/g, '') // 第二步:把不是数字,不是小数点的过滤掉
.replace(/^0+(\d)/, '$1') // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
.replace(/^\./, '0.') // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
.match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
},
}
}
推荐阅读
发表评论