HarmonyOS NEXT - 表单录入组件封装(TextInput)

demo 地址: https://github.com/iotjin/JhHarmonyDemo
组件对应代码实现地址
代码不定时更新，请前往github查看最新代码

HarmonyOS NEXT - 表单录入组件封装（TextInput）

序
JhFormInputCell
JhFormSelectCell
JhLoginTextField

序

鸿蒙next中有两种类型的录入框TextInput(单行录入) 和TextArea(多行录入)

对TextInput 简单封装了下面几种类型的录入样式

JhTextInput
JhFormInputCell
JhFormSelectCell
JhLoginTextField

JhFormInputCell

在这里插入图片描述

用法：

import { BaseNavigation, JhButton, JhFormInputCell } from 'JhCommon'@Entry
@Preview
@Component
struct FormInputCellTestPage {@State name: string = ''@State pwd: string = ''build() {Column() {BaseNavigation({ title: 'JhFormInputCell' }) {Scroll() {Column() {this._body()}}}}}@Builder_body() {JhFormInputCell({placeholder: '默认样式，不设置左标题',inputCallBack: (value) => {console.log(value as string)},})Blank().height(8)JhFormInputCell({text: 'text赋初值',labelText: '顶部文字',placeholder: '请输入',// rightWidget: () => {//   this.rightBuilder()// }})Blank().height(8)JhFormInputCell({labelText: '顶部文字',placeholder: '请输入',// rightWidget: () => {//   this.rightBuilder()// }})JhFormInputCell({title: '左标题',})JhFormInputCell({title: '左标题',text: 'text赋初值,不可编辑',}).enabled(false)JhFormInputCell({title: '左标题',placeholder: '标题加红星',showRedStar: true,})JhFormInputCell({title: '左标题',placeholder: '红色标题',titleStyle: { fontColor: Color.Red, fontSize: 15 }})JhFormInputCell({title: '左标题',text: '红色文字',textStyle: { fontColor: Color.Red, fontSize: 15 }})JhFormInputCell({title: '左标题',placeholder: '红色提示文字',hintTextStyle: { fontColor: Color.Red, fontSize: 15 }})JhFormInputCell({title: '左标题',placeholder: 'text靠右',textAlign: TextAlign.End})JhFormInputCell({title: '左标题',placeholder: '限制长度10,a-zA-Z0-9',maxLength: 10,inputFilter: '[a-zA-Z0-9]'})JhFormInputCell({title: '左标题',placeholder: '限制长度5,数字输入类型',maxLength: 5,inputType: InputType.Number})JhFormInputCell({title: '左标题',placeholder: '左侧自定义',leftWidget: () => {this.rightBuilder()}})JhFormInputCell({title: '左标题',placeholder: '右侧自定义',rightWidget: () => {this.rightBuilder()}})JhFormInputCell({title: '左标题',placeholder: '下划线高亮和动画',borderAnimation: true,borderHighlight: true})JhFormInputCell({title: '左标题',placeholder: '隐藏下划线',hiddenLine: true,})Blank().height(30)JhButton({text: '提 交',onPressed: (): void => this.clickLogin()}).margin(15)}@BuilderleftBuilder() {Text('+86')// Row() {// }// .width('100%')// .height('100%')// .backgroundColor(Color.Yellow)}@BuilderrightBuilder() {Row() {}.width('100').height('100%').backgroundColor(Color.Orange)}clickLogin() {console.log('name:', JSON.stringify(this.name))console.log('pwd:', JSON.stringify(this.pwd))}
}

JhFormSelectCell

在这里插入图片描述

用法

import { BaseNavigation, JhButton, JhFormSelectCell } from 'JhCommon'@Entry
@Preview
@Component
struct FormSelectCellTestPage {@State name: string = ''@State pwd: string = ''@State errorText: string = ''build() {Column() {BaseNavigation({ title: 'JhFormSelectCell' }) {Scroll() {Column() {this._body()}}}}}@Builder_body() {JhFormSelectCell({selectCallBack: () => {console.log('点击cell')},})Blank().height(8)JhFormSelectCell({text: 'text赋初值',labelText: '顶部文字',placeholder: '请选择'})JhFormSelectCell({title: '左标题',})JhFormSelectCell({title: '左标题',text: 'text赋初值',})JhFormSelectCell({showRedStar: true,title: '左标题',placeholder: '标题加红星',})JhFormSelectCell({title: '左标题',placeholder: '红色标题',titleStyle: { fontColor: Color.Red, fontSize: 15 }})JhFormSelectCell({title: '左标题',text: '红色文字',textStyle: { fontColor: Color.Red, fontSize: 15 }})JhFormSelectCell({title: '左标题',text: 'text靠右',textAlign: TextAlign.End})JhFormSelectCell({title: '左标题',placeholder: '左侧自定义',leftWidget: () => {this.rightBuilder()}})JhFormSelectCell({title: '左标题',placeholder: '右侧自定义',rightWidget: () => {this.rightBuilder()}})Blank().height(30)JhButton({text: '提 交',onPressed: (): void => this.clickLogin()}).margin(15)}@BuilderleftBuilder() {Text('+86')// Row() {// }// .width('100%')// .height('100%')// .backgroundColor(Color.Yellow)}@BuilderrightBuilder() {Row() {}.width('100').height('100%').backgroundColor(Color.Orange)}clickLogin() {console.log('name:', JSON.stringify(this.name))console.log('pwd:', JSON.stringify(this.pwd))}
}

JhLoginTextField

在这里插入图片描述

用法

import { BaseNavigation, JhButton, JhLoginTextInput } from 'JhCommon'@Entry
@Preview
@Component
struct FormLoginTextInputTestPage {@State name: string = ''@State pwd: string = ''@State errorText: string = ''build() {Column() {BaseNavigation({ title: 'JhLoginTextInput' }) {Scroll() {Column() {this._body()}}}}}@Builder_body() {JhLoginTextInput({text: 'text赋初值',placeholder: '请输入'})JhLoginTextInput({placeholder: '输入时显示删除按钮'})JhLoginTextInput({placeholder: '输入时不显示删除按钮',isShowDeleteBtn: false})JhLoginTextInput({placeholder: '密码样式',isPwd: true})JhLoginTextInput({placeholder: '默认限制长度30',})JhLoginTextInput({placeholder: '限制长度10,a-zA-Z0-9',maxLength: 10,inputFilter: '[a-zA-Z0-9]'})JhLoginTextInput({placeholder: '限制长度5,数字输入类型',maxLength: 5,inputType: InputType.Number})JhLoginTextInput({placeholder: '左侧添加icon',leftIcon: $rawfile("svg/ic_login_user.svg")})JhLoginTextInput({placeholder: '左侧自定义',leftWidget: () => {this.leftBuilder()}})JhLoginTextInput({placeholder: '右侧自定义',rightWidget: () => {this.rightBuilder()}})JhLoginTextInput({placeholder: '取消下划线高亮和动画',borderAnimation: false,borderHighlight: false})Blank().height(8)JhLoginTextInput({text: this.name,labelText: '用户名',placeholder: '请输入用户名',leftIcon: $rawfile("svg/ic_login_user.svg"),inputCallBack: (value) => {this.name = value as string},})Blank().height(8)JhLoginTextInput({text: this.pwd,labelText: '密码',placeholder: '请输入密码',leftIcon: $rawfile("svg/ic_login_pwd.svg"),isPwd: true,inputCallBack: (value) => {this.pwd = value as string},})Blank().height(30)JhButton({text: '登 录',onPressed: (): void => this.clickLogin()}).margin(15)}@BuilderleftBuilder() {Text('+86')// Row() {// }// .width('100%')// .height('100%')// .backgroundColor(Color.Yellow)}@BuilderrightBuilder() {Row() {}.width('100').height('100%').backgroundColor(Color.Orange)}clickLogin() {console.log('name:', JSON.stringify(this.name))console.log('pwd:', JSON.stringify(this.pwd))}
}