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

2022-11-08 13:49:57 +08:00
parent d06f4137c6
commit 812971f6b2
14 changed files with 1285 additions and 1059 deletions
@@ -1,52 +1,62 @@
-import { Input, View } from "@tarojs/components";
-import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
-import styles from  './index.module.scss';
+import { Input, View } from '@tarojs/components'
+import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from 'react'
+import styles from './index.module.scss'

 type Params = {
-    showIcon?: false|true,
-    disabled?: false|true,
-    placeholder?: string,
-    title?: string,
-    showTitle?: false|true,
-    showBorder?: false|true,
-    changeOnInput?: (string) => void,
-    clickOnInput?: () => void,
-    children?: ReactNode
-    height?: string,
-    titleStyle?: Object,
-    styleObj?: Object
-
+  showIcon?: false | true
+  disabled?: false | true
+  placeholder?: string
+  title?: string
+  showTitle?: false | true
+  showBorder?: false | true
+  changeOnInput?: (string) => void
+  clickOnInput?: () => void
+  children?: ReactNode
+  height?: string
+  titleStyle?: Object
+  styleObj?: Object
 }

 export default memo((props: Params) => {
-    let {
-        showTitle = true,
-        title = '标题', 
-        showIcon = false, 
-        disabled = false, 
-        placeholder = '请输入',
-        showBorder = true,
-        changeOnInput,
-        clickOnInput,
-        height = '80rpx',
-        titleStyle = {}
-    } = props
+  let {
+    showTitle = true,
+    title = '标题',
+    showIcon = false,
+    disabled = false,
+    placeholder = '请输入',
+    showBorder = true,
+    changeOnInput,
+    clickOnInput,
+    height = '80rpx',
+    titleStyle = {},
+  } = props

-    let stylen = useMemo(() => {
-        if(!showBorder) {
-            return { borderBottom: 0 }
-        }
-        return {}
-    }, [showBorder])
-    return (
-        <View className={styles.searchInput_main} style={{height: height, ...stylen}}>
-            {showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
-            <View className={styles.searchInput_con}>
-                {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
-                    ||<>{props.children}</>
-                }
-            </View>
-            {showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
+  let stylen = useMemo(() => {
+    if (!showBorder) {
+      return { borderBottom: 0 }
+    }
+    return {}
+  }, [showBorder])
+  return (
+    <View className={styles.searchInput_main} style={{ height: height, ...stylen }}>
+      {showTitle && (
+        <View className={styles.searchInput_title} style={titleStyle}>
+          {title}
        </View>
-    )
-})
+      )}
+      <View className={styles.searchInput_con}>
+        {(!props.children && (
+          <Input
+            alwaysEmbed={true}
+            cursorSpacing={150}
+            disabled={disabled}
+            placeholder={placeholder}
+            onClick={() => clickOnInput?.()}
+            onInput={(e) => changeOnInput?.(e.detail.value)}
+          />
+        )) || <>{props.children}</>}
+      </View>
+      {showIcon && <View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
+    </View>
+  )
+})