el-input只能输⼊数字，保留两位⼩数实现思路
单独做⼀个组件来实现额外的功能
只能输⼊数字:  监听input事件，在监听函数中通过正则处理掉⾮字符
保留两位⼩数:  监听blur事件，在失去焦点时格式化为2位⼩数，对于从prop中进来的value属性每次都进⾏格式化完整代码
<template>
<el-input
v-model="inputValue"
@blur="onBlur"
@input="onInput"/>
</template>
<script>
const debounce=(func,awit,immediately)=>{//防抖函数
var timer;
return function(){
var self=this;
if(immediately && !timer){
func.call(self)input绑定onblur事件
}
if(timer)
clearTimeout(timer);
timer=setTimeout(function(){
func.call(self)
},awit)
}
}
const toDecimal2=(x)=>{//格式化函数
if(x.split('.').length>2){
x=x.split('.').slice(0,2).join('.');
}
var f = parseFloat(x);
if (isNaN(f)) {
return '0.00';
}
f = und(x*100)/100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
export default {
props:{
value:{
}
},
data(){
return {
inputValue:this.value,
emitEvent:debounce(()=>{
this.$emit('input',this.inputValue)
},1000)
}
},
watch:{
value(){
this.inputValue=toDecimal2(this.value)
}
},
methods:{
onBlur(){
this.inputValue=toDecimal2(this.inputValue);
},
onInput(value){
this.inputValue = place(/[^\d.]/g,'');
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。