input 输入金额,失去焦点自动转化成百分位展示,编辑focus的时候自动取消百分位
页面代码:
<div style="width: 300px;">
<el-input
v-model="text"
placeholder="Please input"
type="text"
@focus="inputFocus"
@blur="inputBlur"
/>
</div>
逻辑处理:
需要定义两个方法,一个是失去焦点转化千分位,一个是获取焦点取消千分位
const text = ref()
const inputFocus = ()=>{
inputFoces(text.value)
}
const inputBlur = ()=>{
fmoney(text.value)
}
const fmoney = (val)=>{
if(val === '' || val == null || isNaN(val)){
return val || 0.00
}else{
val = Math.round(val * Math.pow(10,2)) / Math.pow(10,2)
val = Number(val).toFixed(2)
val = isNaN(Number(val)) ? '' : Number(val).toLocaleString()
let dotLen = 0
let idx = val.indexOf('.')
if(idx > -1){
dotLen = val.substr(idx).length - 1
}
if(dotLen == 0){
val = val+ '.00'
}else if(dotLen == 1){
val = val + '0'
}
text.value = val
return val
}
}
const inputFoces = (val)=>{
if((val + '').trim() === ''){
return ''
}
if(val){
val = val.replace(/,/gi,'')
val = Math.round(val * Math.pow(10,2)) / Math.pow(10,2)
val = Number(val).toFixed(2)
text.value = val
return val
}
return val
}