添加输入组件测试

common_ui/src/main/ets/component/InputComponent.ets

@@ -0,0 +1,68 @@
+import { CommonRes } from '../utils/CommonRes';
+
+@Extend(TextInput)
+function textInputStyle() {
+  .fontSize(15)
+  .height(45)
+  .backgroundColor(Color.White)
+  .padding(5)
+}
+
+@Preview
+@Component
+export struct PhoneInput {
+  @Prop countryCode: string = "+86"
+  onCountryCodeClick?: () => void;
+  @State inputText: string = ''
+  onInputChanged?: (value: string) => void;
+  @State isClearVisible: boolean = false;
+
+  build() {
+    Flex({
+      justifyContent: FlexAlign.SpaceBetween,
+      alignItems: ItemAlign.Center,
+    }) {
+      // 国家码
+      Row() {
+        Text(this.countryCode)
+          .height(44)
+        Image($r('app.media.ic_chevron_down'))
+          .objectFit(ImageFit.Contain)
+          .width(12)
+          .height(12)
+          .backgroundColor(Color.Red)
+          .margin({
+            left: 2,
+            right: 24
+          })
+      }.backgroundColor(Color.Green).width('')
+      .onClick(() => {
+        this.onCountryCodeClick?.();
+      })
+
+      // 账号输入框
+      TextInput({ placeholder: "请输入号码", text: this.inputText })
+        .maxLength(20)
+        .type(InputType.Normal)
+        .textInputStyle()
+        .onChange((value: string) => {
+          if (value) {
+            this.isClearVisible = value.length > 0;
+          } else {
+            this.isClearVisible = false;
+          }
+          this.onInputChanged?.(value);
+        })
+        .width('100%')
+
+      Image($r('app.media.ic_clear_circle'))
+        .width(18)
+        .height(18)
+        .backgroundColor(Color.Green)
+        .colorBlend('#e1e2e5').objectFit(ImageFit.Contain)
+        .onClick(() => {
+          this.inputText = ''
+        }).visibility(this.isClearVisible ? Visibility.Visible : Visibility.None)
+    }
+  }
+}

common_ui/src/main/ets/utils/CommonRes.ets

@@ -30,9 +30,17 @@ export class CommonRes {
     return $r("app.media.ic_eye_off");
   }
 
-  public static getImageRes(resName: string): Resource {
+  public static getImage(resName: string): Resource {
     return $r(`app.media.${resName}`);
   }
+
+  public static getString(name: string): ResourceStr {
+    return $r(`app.string.${name}`);
+  }
+
+  public static getFloat(name: string): ResourceStr {
+    return $r(`app.float.${name}`)
+  }
 }
 
 export class CommonMediaName {