feat: 新增MoneyInput组件

src/components/MoneyInput/index.scss

@@ -0,0 +1,53 @@
+
+.line-separator {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 15px;
+  margin-top: 5px;
+  .side-line {
+    display: inline-block;
+    border-top: 1px solid #cacaca;
+    &:nth-of-type(1) {
+      width: 24px;
+    }
+    &:last-of-type {
+      width: calc(100% - 24px - 12px);
+      margin-left: 11px;
+    }
+  }
+
+  .triangle-num {
+    position: absolute;
+    top: -1px;
+    left: 24px;
+    font-size: 12px;
+    color: #cacaca;
+    // transform: scale(0.5);
+  }
+
+  .triangle-triangle {
+    position: absolute;
+    top: -5px;
+    left: 24px;
+    font-size: 12px;
+    color: #cacaca;
+    &::after {
+      position: absolute;
+      top: 3px;
+      left: 0;
+      display: inline-block;
+      width: 9px;
+      height: 9px;
+      margin: -2px 1px -3px;
+      content: '';
+      border-top: 1px solid #cacaca;
+      border-left: 1px solid #cacaca;
+      transform: rotate(45deg);
+      transform-origin: center center;
+    }
+  }
+}

src/components/MoneyInput/index.tsx

@@ -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