demo 地址: https://github.com/iotjin/JhHarmonyDemo
组件对应代码实现地址
代码不定时更新，请前往github查看最新代码
HarmonyOS NEXT - 表单录入组件封装（TextInput）
序
鸿蒙next中有两种类型的录入框TextInput(单行录入) 和TextArea(多行录入)
对TextInput 简单封装了下面几种类型的录入样式
- JhTextInput
- JhFormInputCell
- JhFormSelectCell
- JhLoginTextField
JhFormInputCell
用法：
js
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)
}
@Builder
leftBuilder() {
Text('+86')
// Row() {
// }
// .width('100%')
// .height('100%')
// .backgroundColor(Color.Yellow)
}
@Builder
rightBuilder() {
Row() {
}
.width('100')
.height('100%')
.backgroundColor(Color.Orange)
}
clickLogin() {
console.log('name:', JSON.stringify(this.name))
console.log('pwd:', JSON.stringify(this.pwd))
}
}JhFormSelectCell
用法
js
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)
}
@Builder
leftBuilder() {
Text('+86')
// Row() {
// }
// .width('100%')
// .height('100%')
// .backgroundColor(Color.Yellow)
}
@Builder
rightBuilder() {
Row() {
}
.width('100')
.height('100%')
.backgroundColor(Color.Orange)
}
clickLogin() {
console.log('name:', JSON.stringify(this.name))
console.log('pwd:', JSON.stringify(this.pwd))
}
}JhLoginTextField
用法
js
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)
}
@Builder
leftBuilder() {
Text('+86')
// Row() {
// }
// .width('100%')
// .height('100%')
// .backgroundColor(Color.Yellow)
}
@Builder
rightBuilder() {
Row() {
}
.width('100')
.height('100%')
.backgroundColor(Color.Orange)
}
clickLogin() {
console.log('name:', JSON.stringify(this.name))
console.log('pwd:', JSON.stringify(this.pwd))
}
}