|
@@ -0,0 +1,61 @@
|
|
|
+import { formatMoney } from '@/utils/util'
|
|
|
+import { Input } from 'antd'
|
|
|
+import { InputProps } from 'antd/lib/input'
|
|
|
+import React, { ChangeEvent, useState } from 'react'
|
|
|
+import './index.scss'
|
|
|
+
|
|
|
+interface iState {
|
|
|
+ digit: string
|
|
|
+ inputVal: string
|
|
|
+}
|
|
|
+const MoneyInput: React.FC<InputProps> = (props) => {
|
|
|
+ const [ state, setState ] = useState<iState>({
|
|
|
+ digit: '',
|
|
|
+ inputVal: ''
|
|
|
+ })
|
|
|
+ const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
|
+ console.log(e.target.value)
|
|
|
+
|
|
|
+ const len = e.target.value.length
|
|
|
+ if (len > 12) return
|
|
|
+ const inputVal = e.target.value
|
|
|
+
|
|
|
+ const digits = {
|
|
|
+ 4: '千',
|
|
|
+ 5: '万',
|
|
|
+ 6: '十万',
|
|
|
+ 7: '百万',
|
|
|
+ 8: '千万',
|
|
|
+ 9: '亿',
|
|
|
+ 10: '十亿',
|
|
|
+ 11: '百亿',
|
|
|
+ 12: '千亿'
|
|
|
+ }
|
|
|
+ if(digits[len]) {
|
|
|
+ setState({ ...state, digit: digits[len], inputVal })
|
|
|
+ } else {
|
|
|
+ setState({ ...state, digit: '', inputVal })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="ant-input ant-input-sm">
|
|
|
+ <div className="pi-flex-row">
|
|
|
+ <span className="pi-fz-14 pi-mg-right-5">¥</span>
|
|
|
+ <Input bordered={false} {...props} onChange={handleChange} type="number" value={state.inputVal} max={999999999999}/>
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ state.digit ?
|
|
|
+ <div className='line-separator'>
|
|
|
+ <div className="side-line"> </div>
|
|
|
+ <div className="triangle-triangle" />
|
|
|
+ <div className="triangle-num">{state.digit}</div>
|
|
|
+ <div className="side-line"> </div>
|
|
|
+ </div>
|
|
|
+ : null
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default MoneyInput
|