最近项目是国内项目定制化要求比较高,所以我们没办法用salesforce提供标签编写代码,遇到了一个currency字段显示问题。下面是我的实现方法。第一个截图输入的是数字,当输入结束后变成金钱 显示方式。欢迎沟通交流。
<template>
<lightning-card>
<label >测试原生input</label>
<input name="COP_Rebate_Amount_HB00__c" type="text" class="controls" oninput={handleFieldValesChange} value={testObj.testStr} onfocus={handleNumberInputOnfocusMethod} onblur={handleNumberInputOnblurMethod}>
</lightning-card>
</template>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
margin: 0;
padding: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
input,button {
/* 去掉轮廓线 */
outline: none;
border:none;
}
input {
padding: 0 12px;
background-color: beige;
}
import { LightningElement ,track} from 'lwc';
export default class CustomInputLWC extends LightningElement {
@track testObj = {
testStr:'',
test:undefined,
}
handleFieldValesChange(event){
//返利使用
this.testObj.test = event.target.value !== 0 ? event.target.value : 0;
this.testObj.testStr = event.target.value !== 0 ? event.target.value : 0;
}
handleNumberInputOnfocusMethod(event){
event.target.setAttribute("type","number");
event.target.value = parseFloat(this.testObj.test);
}
handleNumberInputOnblurMethod(event){
event.target.setAttribute("type","text");
var currencyNumber = this.changeNumberToMoneyMethod(this.testObj.test);
this.testObj.testStr = currencyNumber
event.target.value = currencyNumber;
}
changeNumberToMoneyMethod(currencyNumber) {
if (currencyNumber) {
currencyNumber = typeof currencyNumber == 'string' ? parseFloat(currencyNumber) : currencyNumber ;//判断是否是字符串如果是字符串转成数字
currencyNumber = currencyNumber.toFixed(2); //保留两位
currencyNumber = parseFloat(currencyNumber); //转成数字
currencyNumber = currencyNumber.toLocaleString(); //转成金额显示模式
//判断是否有小数
if (currencyNumber.indexOf('.') == -1) {
currencyNumber = currencyNumber + '.00'
} else {
currencyNumber = currencyNumber.split('.')[1].length < 2 ? currencyNumber + '0' : currencyNumber
}
return currencyNumber //返回的是具有千分位格式并保留2位小数的字符串
} else {
return (currencyNumber = null)
}
}
}