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

2022-11-08 13:49:57 +08:00
parent d06f4137c6
commit 812971f6b2
14 changed files with 1285 additions and 1059 deletions
@@ -1,61 +1,67 @@
+import { Input, Text, Textarea, View } from '@tarojs/components'
+import { memo } from 'react'
+import './index.scss'

-import { Input, Text, Textarea, View } from "@tarojs/components"
-import { memo } from "react"
-import "./index.scss"
-
-interface ListParams{
-  label: string, //左边label
-  onInput?: (ev:Object)=>void, // 输入框输入
-  onClick?:()=>any, //点击列表
-  placeholder?:string, // 提示文本
-  children?: any, // 插槽
-  type?: string  // 类型：1.input,2.textarea,3.select,
-  primordialType?: 'text'|'number'|'idcard'|'digit'
-  value?: any,
-  style?: object, //整行样式
-  labelStyle?: object, // label样式
-  contentStyle?: object,
+interface ListParams {
+  label: string //左边label
+  onInput?: (ev: Object) => void // 输入框输入
+  onClick?: () => any //点击列表
+  placeholder?: string // 提示文本
+  children?: any // 插槽
+  type?: string // 类型：1.input,2.textarea,3.select,
+  primordialType?: 'text' | 'number' | 'idcard' | 'digit'
+  value?: any
+  style?: object //整行样式
+  labelStyle?: object // label样式
+  contentStyle?: object
  required?: boolean
 }

 // 表单列表
-const FromList = memo((props:ListParams)=>{
-  const {type="input",value="",style={},labelStyle={},contentStyle={},required=false} = props;
-  
+const FromList = memo((props: ListParams) => {
+  const { type = 'input', value = '', style = {}, labelStyle = {}, contentStyle = {}, required = false } = props
+
  return (
-    <View style={style} className="form-list">
-      <View style={labelStyle} className={`form-list-label ${required&&"form-list-label-required"}`}>{props.label}</View>
-      <View onClick={props?.onClick} className="form-list-right">
-        {
-          props.children??
-          <View style={contentStyle} onClick={props?.onClick} className="form-list-right-meet">
-            {
-              type=="input"?
-              <View className="form-list-input">
-                <Input value={value} placeholder-class="phcolor" type={props.primordialType||'text'} onInput={props?.onInput} placeholder={props.placeholder} />
-                {value&&
-                  <View><Text onClick={()=>props.onInput&&props.onInput({detail: {value: ""}})} className="iconfont icon-qingkong"/></View>
-                }
-              </View>:
-              type=="textarea"?<Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
-              <>
-                {
-                  props.value?<View>{value}</View>:
-                  <View className="form-list-right-placeholder">
-                    {props.placeholder}
+    <View style={style} className='form-list'>
+      <View style={labelStyle} className={`form-list-label ${required && 'form-list-label-required'}`}>
+        {props.label}
+      </View>
+      <View onClick={props?.onClick} className='form-list-right'>
+        {props.children ?? (
+          <View style={contentStyle} onClick={props?.onClick} className='form-list-right-meet'>
+            {type == 'input' ? (
+              <View className='form-list-input'>
+                <Input
+                  alwaysEmbed={true}
+                  cursorSpacing={150}
+                  value={value}
+                  placeholder-class='phcolor'
+                  type={props.primordialType || 'text'}
+                  onInput={props?.onInput}
+                  placeholder={props.placeholder}
+                />
+                {value && (
+                  <View>
+                    <Text onClick={() => props.onInput && props.onInput({ detail: { value: '' } })} className='iconfont icon-qingkong' />
                  </View>
-                }
-                <View className="form-list-right-enter"><Text className="iconfont icon-a-moreback"></Text></View>
+                )}
+              </View>
+            ) : type == 'textarea' ? (
+              <Textarea value={value} placeholder-class='phcolor' onInput={props?.onInput} placeholder={props.placeholder} />
+            ) : (
+              <>
+                {props.value ? <View>{value}</View> : <View className='form-list-right-placeholder'>{props.placeholder}</View>}
+                <View className='form-list-right-enter'>
+                  <Text className='iconfont icon-a-moreback'></Text>
+                </View>
              </>
-            }
+            )}
          </View>
-        }
+        )}
      </View>
    </View>
  )
 })

-const A = ()=>{
-  
-}
-export default FromList;
+const A = () => {}
+export default FromList