🎈 perf(优化所有输入框):

2022-11-08 13:49:57 +08:00
parent d06f4137c6
commit 812971f6b2
14 changed files with 1285 additions and 1059 deletions
@@ -1,115 +1,110 @@
-import { Input, View } from "@tarojs/components"
-import { useEffect, useMemo, useRef, useState } from "react"
+import { Input, View } from '@tarojs/components'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import Big from 'big.js'
-import styles from "./index.module.scss"
+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, //是否禁用
+  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 ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
-    const [value, setValue] = useState<any>({count:defaultNum})
+export default ({ minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false }: params) => {
+  const [value, setValue] = useState<any>({ count: defaultNum })

-    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 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 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 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 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 = () => {
+    let num = parseFloat(value.count)
+    if (!isNaN(num)) {
+      let count = formatDigits(num)
+      count = checkData(count)
+      setValue({ ...value, count })
+      onBlue?.(count as number)
+    } else {
+      setValue({ ...value, count: defaultNum })
+      onBlue?.(defaultNum)
    }
-
-    const onBluerEven = () => {
-        let num = parseFloat(value.count)
-        if(!isNaN(num)) {
-            let count  = formatDigits(num)
-            count = checkData(count)
-            setValue({...value, count})
-            onBlue?.(count as number)
-        } else {
-            setValue({...value, count:defaultNum})
-            onBlue?.(defaultNum)
-        }
-    }   
-    return (
-        <View className={styles.main}>
-            <View className={styles.reduce} onClick={() => minus()}>-</View>
-            <View className={styles.input}>
-                <Input 
-                    value={String(value.count)}
-                    onInput={onInputEven}
-                    onBlur={onBluerEven}
-                    type='digit'
-                    disabled={disable}
-                />
-                <View className={styles.unit}>{unit}</View>
-            </View>
-            <View className={styles.plus} onClick={() => onPlus()}>+</View>
-        </View>
-    )
-}
+  }
+  return (
+    <View className={styles.main}>
+      <View className={styles.reduce} onClick={() => minus()}>
+        -
+      </View>
+      <View className={styles.input}>
+        <Input value={String(value.count)} 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>
+  )
+}
@@ -1,111 +1,107 @@
-import { Input, View } from "@tarojs/components"
-import { useEffect, useMemo, useRef, useState } from "react"
+import { Input, View } from '@tarojs/components'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import Big from 'big.js'
-import styles from "./index.module.scss"
+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
+  minNum?: number //最小值
+  maxNum?: number //最大值
+  step?: number //步长
+  defaultNum?: number //默认值
+  digits?: number //多少位小数
+  onChange?: (val: number) => void
+  onBlue?: (val: number) => void //失去焦点触发
+  onClickBtn?: (val: number) => void
+  unit?: string
 }
-export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => {
-    const [value, setValue] = useState<any>({count:defaultNum})
+export default ({ minNum = 0, maxNum = 100, step = 1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '' }: params) => {
+  const [value, setValue] = useState<any>({ count: defaultNum })

-    const onPlus = () => {
-        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 = () => {
-        let {count} = value
-        let num_res = Big(count).minus(step).toNumber()
-        num_res = num_res < minNum?0:num_res
-        setValue({...value, count:num_res})
-        onChange?.(parseFloat(num_res))
-        onClickBtn?.(parseFloat(num_res))
-    }
+  const onPlus = () => {
+    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 = () => {
+    let { count } = value
+    let num_res = Big(count).minus(step).toNumber()
+    num_res = num_res < minNum ? 0 : 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 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 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 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 = () => {
+    let num = parseFloat(value.count)
+    if (!isNaN(num)) {
+      let count = formatDigits(num)
+      count = checkData(count)
+      setValue({ ...value, count })
+      onBlue?.(count as number)
+    } else {
+      setValue({ ...value, count: defaultNum })
+      onBlue?.(defaultNum)
    }
-
-    const onBluerEven = () => {
-        let num = parseFloat(value.count)
-        if(!isNaN(num)) {
-            let count  = formatDigits(num)
-            count = checkData(count)
-            setValue({...value, count})
-            onBlue?.(count as number)
-        } else {
-            setValue({...value, count:defaultNum})
-            onBlue?.(defaultNum)
-        }
-    }   
-    return (
-        <View className={styles.main}>
-            <View className={styles.reduce} onClick={() => minus()}>-</View>
-            <View className={styles.input}>
-                <Input 
-                    value={String(value.count)}
-                    onInput={onInputEven}
-                    onBlur={onBluerEven}
-                    type='digit'
-                />
-                <View className={styles.unit}>{unit}</View>
-            </View>
-            <View className={styles.plus} onClick={() => onPlus()}>+</View>
-        </View>
-    )
-}
+  }
+  return (
+    <View className={styles.main}>
+      <View className={styles.reduce} onClick={() => minus()}>
+        -
+      </View>
+      <View className={styles.input}>
+        <Input value={String(value.count)} onInput={onInputEven} onBlur={onBluerEven} type='digit' alwaysEmbed={true} cursorSpacing={150} />
+        <View className={styles.unit}>{unit}</View>
+      </View>
+      <View className={styles.plus} onClick={() => onPlus()}>
+        +
+      </View>
+    </View>
+  )
+}