Explorar o código

♻️ refactor(input): 适配Taro框架组件改造

- 将div元素替换为Taro的View组件以适配小程序环境
- 将p元素替换为Taro的Text组件确保文本正确渲染
- 更新forwardRef类型为any以兼容Taro组件引用
- 导入View和Text组件以支持Taro框架渲染要求
yourname hai 4 meses
pai
achega
179e0a3e62
Modificáronse 1 ficheiros con 13 adicións e 13 borrados
  1. 13 13
      mini/src/components/ui/input.tsx

+ 13 - 13
mini/src/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import { Input as TaroInput, InputProps as TaroInputProps } from '@tarojs/components'
+import { Input as TaroInput, InputProps as TaroInputProps, View, Text } from '@tarojs/components'
 import { cn } from '@/utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { forwardRef } from 'react'
@@ -34,15 +34,15 @@ export interface InputProps extends Omit<TaroInputProps, 'className'>, VariantPr
   errorMessage?: string
 }
 
-const Input = forwardRef<HTMLInputElement, InputProps>(
+const Input = forwardRef<any, InputProps>(
   ({ className, variant, size, leftIcon, rightIcon, error, errorMessage, ...props }, ref) => {
     return (
-      <div className="w-full">
-        <div className="relative">
+      <View className="w-full">
+        <View className="relative">
           {leftIcon && (
-            <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
-              <div className={cn('w-5 h-5 text-gray-400', leftIcon)} />
-            </div>
+            <View className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
+              <View className={cn('w-5 h-5 text-gray-400', leftIcon)} />
+            </View>
           )}
           
           <TaroInput
@@ -57,16 +57,16 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           />
           
           {rightIcon && (
-            <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
-              <div className={cn('w-5 h-5 text-gray-400', rightIcon)} />
-            </div>
+            <View className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+              <View className={cn('w-5 h-5 text-gray-400', rightIcon)} />
+            </View>
           )}
-        </div>
+        </View>
         
         {error && errorMessage && (
-          <p className="mt-1 text-sm text-red-600">{errorMessage}</p>
+          <Text className="mt-1 text-sm text-red-600">{errorMessage}</Text>
         )}
-      </div>
+      </View>
     )
   }
 )