页面

src/components/search/index.module.scss

@@ -5,9 +5,6 @@
     .icon_a_sousuo1_self{
         font-size: 37px;
         color: $color_font_two;
-        margin-right: 20px;
-        position: absolute;
-        left: 10px;
     }
     .search_con{
         position: relative;
@@ -20,7 +17,7 @@
             width: 100%;
             height: 60px;
             border-radius: 50px;
-            padding: 0 60px 0 60px;
+            padding: 0 60px;
             box-sizing: border-box;
             &::-webkit-input-placeholder { /* WebKit browsers */
                 color: #999;
@@ -40,8 +37,27 @@
         .search_closeBtn{
             position: absolute;
             right: 10px;
-    
         }
+        
+    }
+    .btn{
+        width: 100px;
+        font-size: $font_size_medium;
+        color: $color_font_two;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+    .icon_inner{
+        margin-right: 20px;
+        position: absolute;
+        left: 10px;
+        margin-right: 0;
+        
+    }
+    .icon_out{
+        margin-right: 10px;
     }
     
 }

src/components/search/index.tsx

@@ -1,15 +1,19 @@
 import { Input, View } from "@tarojs/components";
 import styles from "./index.module.scss"
 import CloseBtn from "@/components/closeBtn"
-import { memo, useState } from "react";
+import classnames from "classnames";
+import { memo, useEffect, useState } from "react";
 
 type Params = {
-    clickOnSearch?: () => void
+    clickOnSearch?: (val: string) => void
     disabled?: false|true,
     placeholder?: string,
     changeOnSearch?:(any) => void,
     showIcon?: false|true,
-    style?: Object
+    placeIcon?: 'out'|'inner',
+    style?: Object,
+    showBtn?: false|true,
+    btnStyle?: Object
 }
 
 export default memo(({
@@ -18,10 +22,13 @@ export default memo(({
     disabled = false,
     placeholder = '输入搜索内容',
     showIcon = true,
-    style = {}
+    showBtn = false,
+    style = {},
+    btnStyle = {},
+    placeIcon = 'inner'
 }:Params) => {
     const [inputCon , setInputCon] = useState('')
-
+    
     const onInputEven = (e) => {
         const value = e.detail.value
         setInputCon(value)
@@ -32,16 +39,22 @@ export default memo(({
         setInputCon('')
         changeOnSearch?.('')
     }
+
+    const onSearch = () => {
+        clickOnSearch?.(inputCon)
+    }
+
     return (
         <>
-            <View className={styles.search_main} onClick={() => clickOnSearch?.()} style={style}>
+            <View className={styles.search_main} onClick={() => onSearch()} style={style}>
                 <View className={styles.search_con}>
-                    {showIcon&&<View className={`iconfont icon-sousuo  ${styles.icon_a_sousuo1_self}`}></View>}
+                    {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' disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
                     {!!inputCon&&<View className={styles.search_closeBtn}>
                         <CloseBtn onClose={() => clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/>
                     </View>}
                 </View>
+                {showBtn&&<View style={btnStyle} className={styles.btn} onClick = {() => onSearch()}>搜索</View>}
             </View>
         </>
     )