salesforce 用input 实现currency功能

最新推荐文章于 2023-10-07 09:22:44 发布

zhilianhe

最新推荐文章于 2023-10-07 09:22:44 发布

阅读量108

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/zhilianhe/article/details/131881991

版权

最近项目是国内项目定制化要求比较高，所以我们没办法用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)
        }
    }
}