137 lines
4.2 KiB
TypeScript
137 lines
4.2 KiB
TypeScript
import { Input, View } from '@tarojs/components'
|
|
import { memo, useEffect, useMemo, useRef, useState } from 'react'
|
|
import Big from 'big.js'
|
|
import styles from './index.module.scss'
|
|
type params = {
|
|
minNum?: number //最小值
|
|
maxNum?: number //最大值
|
|
step?: number //步长
|
|
defaultNum?: number //默认值
|
|
digits?: number //多少位小数
|
|
onChange?: (val: number) => void
|
|
onBlue?: (val: number) => void //失去焦点触发
|
|
onClickBtn?: (val: number) => void
|
|
unit?: string
|
|
disable?: true | false //是否禁用
|
|
}
|
|
export default memo((props: params) => {
|
|
return <Counter {...props}></Counter>
|
|
})
|
|
|
|
function areEqual(prevProps: params, nextProps: params) {
|
|
return (
|
|
prevProps.defaultNum == nextProps.defaultNum &&
|
|
prevProps.unit == nextProps.unit &&
|
|
prevProps.minNum == nextProps.minNum &&
|
|
prevProps.maxNum == nextProps.maxNum &&
|
|
prevProps.step == nextProps.step &&
|
|
prevProps.digits == nextProps.digits
|
|
)
|
|
}
|
|
const Counter = memo((props: params) => {
|
|
let { minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false } = props
|
|
const [value, setValue] = useState<any>({ count: defaultNum })
|
|
// useEffect(() => {
|
|
// setValue({ count: defaultNum })
|
|
// }, [defaultNum])
|
|
console.log('1231231231231212')
|
|
const onPlus = () => {
|
|
if (disable) return false
|
|
let { count } = value
|
|
let num_res = Big(count).add(step).toNumber()
|
|
num_res = num_res >= maxNum ? maxNum : num_res
|
|
num_res = formatDigits(num_res)
|
|
// setValue({ ...value, count: num_res })
|
|
onChange?.(parseFloat(num_res))
|
|
onClickBtn?.(parseFloat(num_res))
|
|
}
|
|
const minus = () => {
|
|
if (disable) return false
|
|
let { count } = value
|
|
let num_res = Big(count).minus(step).toNumber()
|
|
num_res = num_res < minNum ? minNum : num_res
|
|
// setValue({ ...value, count: num_res })
|
|
onChange?.(parseFloat(num_res))
|
|
onClickBtn?.(parseFloat(num_res))
|
|
}
|
|
|
|
//保留小数
|
|
const formatDigits = (num) => {
|
|
num = num + ''
|
|
if (num.includes('.') && digits > 0) {
|
|
console.log('num::', num.includes('.'))
|
|
let res = num.split('.')
|
|
let last_num = res[1].substr(0, digits)
|
|
return res[0] + '.' + last_num
|
|
}
|
|
return parseFloat(num)
|
|
}
|
|
|
|
//检查数据
|
|
const checkData = (val) => {
|
|
let num = parseFloat(val)
|
|
if (num > maxNum) return maxNum
|
|
if (num < minNum) return minNum
|
|
return val
|
|
}
|
|
|
|
const onInputEven = (e) => {
|
|
// let res = e.detail.value
|
|
// if (res === '') {
|
|
// // setValue({ ...value, count: minNum })
|
|
// onChange?.(minNum)
|
|
// } else if (!isNaN(Number(res))) {
|
|
// let count = formatDigits(res)
|
|
// count = checkData(count)
|
|
// // setValue({ ...value, count })
|
|
// onChange?.(parseFloat(count as string))
|
|
// } else {
|
|
// let num = parseFloat(res)
|
|
// if (!isNaN(num)) {
|
|
// let count = formatDigits(num)
|
|
// count = checkData(count)
|
|
// // setValue({ ...value, count })
|
|
// onChange?.(count as number)
|
|
// } else {
|
|
// // setValue({ ...value, count: defaultNum })
|
|
// onChange?.(defaultNum)
|
|
// }
|
|
// }
|
|
}
|
|
|
|
const onBluerEven = (e) => {
|
|
let num = parseFloat(e.detail.value)
|
|
if (!isNaN(num)) {
|
|
let count = formatDigits(num)
|
|
count = checkData(count)
|
|
// setValue({ ...value, count })
|
|
onBlue?.(count as number)
|
|
} else {
|
|
// setValue({ ...value, count: defaultNum })
|
|
onBlue?.(minNum)
|
|
}
|
|
}
|
|
return (
|
|
<View className={styles.main}>
|
|
<View className={styles.reduce} onClick={() => minus()}>
|
|
-
|
|
</View>
|
|
<View className={styles.input}>
|
|
<Input
|
|
value={String(props.defaultNum)}
|
|
onInput={onInputEven}
|
|
onBlur={onBluerEven}
|
|
type='digit'
|
|
disabled={disable}
|
|
alwaysEmbed={true}
|
|
cursorSpacing={150}
|
|
/>
|
|
<View className={styles.unit}>{unit}</View>
|
|
</View>
|
|
<View className={styles.plus} onClick={() => onPlus()}>
|
|
+
|
|
</View>
|
|
</View>
|
|
)
|
|
}, areEqual)
|