登录封装完成

src/components/search/index.tsx

@@ -2,7 +2,8 @@ import { Input, View } from "@tarojs/components";
 import styles from "./index.module.scss"
 import CloseBtn from "@/components/closeBtn"
 import classnames from "classnames";
-import { memo, useEffect, useState } from "react";
+import { debounce } from "@/common/util";
+import { memo, useEffect, useRef, useState } from "react";
 
 type Params = {
     clickOnSearch?: (val: string) => void
@@ -14,7 +15,8 @@ type Params = {
     style?: Object,
     showBtn?: false|true,
     btnStyle?: Object,
-    btnTitle?: string
+    btnTitle?: string,
+    debounceTime?: number //防抖时间，不设默认wei'ling
 }
 
 export default memo(({
@@ -24,17 +26,21 @@ export default memo(({
     placeholder = '输入搜索内容',
     showIcon = true,
     showBtn = false,
-    style = {},
     btnStyle = {},
     placeIcon = 'inner',
-    btnTitle = '搜索'
+    btnTitle = '搜索',
+    debounceTime = 0
 }:Params) => {
     const [inputCon , setInputCon] = useState('')
-    
+    const debounceTimeRef = useRef(0)
+
+    useEffect(() => {
+        debounceTimeRef.current = debounceTime
+    }, [debounceTime])
+
     const onInputEven = (e) => {
         const value = e.detail.value
-        setInputCon(value)
-        changeOnSearch?.(value)
+        changeData(value)
     }
 
     const clearInput = () => {
@@ -42,13 +48,18 @@ export default memo(({
         changeOnSearch?.('')
     }
 
+    const changeData = debounce((value) => {
+        setInputCon(value)
+        changeOnSearch?.(value)
+    }, debounceTimeRef.current)
+
     const onSearch = () => {
         clickOnSearch?.(inputCon)
     }
 
     return (
         <>
-            <View className={styles.search_main} onClick={() => onSearch()} style={style}>
+            <View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
                 <View className={styles.search_con}>
                     {showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
                     <Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>