安徽汽车网网站建设培训网站 建

安徽汽车网网站建设,培训网站 建,网站建设方面的书籍,wordpress用户冻结视频地址#xff1a; https://www.bilibili.com/video/BV1jomdBBE4H/ #x1f4cb; 目录 概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结 概述 PasswordInput 是控件库中专用于密码输入的组件#xff0c;基于 TextInput 扩展而来#xff0c;支持显示/…视频地址https://www.bilibili.com/video/BV1jomdBBE4H/ 目录概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结概述PasswordInput是控件库中专用于密码输入的组件基于TextInput扩展而来支持显示/隐藏密码切换、密码强度显示、验证等功能适用于登录、注册、密码修改等场景。设计理念密码输入框采用安全易用设计具有以下特点安全优先默认隐藏密码支持一键切换显示/隐藏强度提示实时显示密码强度帮助用户创建安全密码功能完整支持验证、提示、多种尺寸和状态品牌标识左下角自动包含品牌标识圆圈红字PC主题统一所有样式配置都在代码中方便定制适用场景用户登录登录页面的密码输入用户注册注册页面的密码设置密码修改修改密码功能安全验证需要密码确认的场景特性✨ 核心特性✅显示/隐藏切换支持一键切换密码显示/隐藏状态✅密码强度显示实时计算并显示密码强度弱/中/强✅强度指示条可视化显示密码强度等级✅标签和提示支持标签、提示文本、错误提示✅多种尺寸支持 small、medium、large 三种尺寸✅状态管理支持禁用、只读、必填等状态✅长度限制支持最大长度限制✅品牌标识自动包含左下角品牌标识✅主题配置所有样式都可通过代码配置 视觉特点正常状态白色背景 灰色边框错误状态红色边框 红色错误提示禁用状态灰色背景 灰色文字 灰色边框只读状态正常样式但不可编辑强度指示弱红、中橙、强绿三种颜色快速开始基础用法import{PasswordInput}from../components/baseEntry Component struct MyPage{State password:stringbuild(){Column({space:20}){// 基础密码输入框PasswordInput({value:$password,placeholder:请输入密码})// 带标签的密码输入框PasswordInput({value:$password,placeholder:请输入密码,label:密码})// 带密码强度的密码输入框PasswordInput({value:$password,placeholder:请输入密码,label:密码,showStrength:true})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}关于双向绑定PasswordInput使用Link实现双向绑定需要使用$variableName语法State password:stringPasswordInput({value:$password// 使用 $ 创建双向绑定})API 参考Props属性名类型默认值说明valueLink string-密码值必需双向绑定placeholderstring请输入密码占位符文本labelstring?undefined标签文本可选hintstring?undefined提示文本可选显示在输入框下方errorMessagestring?undefined错误提示文本可选优先级高于 hintinputSizesmall | medium | largemedium输入框尺寸disabledbooleanfalse是否禁用readonlybooleanfalse是否只读requiredbooleanfalse是否必填maxLengthnumber?undefined最大长度showStrengthbooleanfalse是否显示密码强度showToggleButtonbooleantrue是否显示显示/隐藏切换按钮showBrandbooleantrue是否显示品牌标识inputWidthstring | number?undefined输入框宽度PasswordStrength 枚举值说明None无空密码Weak弱Medium中Strong强尺寸规格尺寸高度字体大小图标大小内边距左右small48vp14vp18vp12vpmedium60vp16vp20vp14vplarge72vp18vp24vp16vp使用示例1. 基础密码输入框Entry Component struct PasswordExample1{State password:stringbuild(){Column({space:15}){PasswordInput({value:$password,placeholder:请输入密码})Text(密码长度${this.password.length}).fontSize(14).fontColor(#666)}.width(100%).padding(20)}}2. 带标签和提示Entry Component struct PasswordExample2{State password:stringbuild(){Column({space:15}){PasswordInput({value:$password,placeholder:请输入密码,label:密码,hint:密码长度为8-20个字符})PasswordInput({value:$password,placeholder:请确认密码,label:确认密码,errorMessage:两次输入的密码不一致})}.width(100%).padding(20)}}3. 密码强度显示Entry Component struct PasswordExample3{State password:stringbuild(){Column({space:15}){PasswordInput({value:$password,placeholder:请输入密码,label:密码,showStrength:true,hint:密码应包含大小写字母、数字和特殊字符})}.width(100%).padding(20)}}4. 不同尺寸Entry Component struct PasswordExample4{State password1:stringState password2:stringState password3:stringbuild(){Column({space:15}){PasswordInput({value:$password1,placeholder:小尺寸,inputSize:small})PasswordInput({value:$password2,placeholder:中等尺寸默认,inputSize:medium})PasswordInput({value:$password3,placeholder:大尺寸,inputSize:large})}.width(100%).padding(20)}}5. 必填和状态Entry Component struct PasswordExample5{State password1:stringState password2:string已设置密码State password3:string只读密码build(){Column({space:15}){PasswordInput({value:$password1,placeholder:请输入密码,label:密码,required:true})PasswordInput({value:$password2,placeholder:请输入密码,label:禁用状态,disabled:true})PasswordInput({value:$password3,placeholder:请输入密码,label:只读状态,readonly:true})}.width(100%).padding(20)}}6. 隐藏切换按钮Entry Component struct PasswordExample6{State password:stringbuild(){Column({space:15}){PasswordInput({value:$password,placeholder:显示切换按钮默认,label:密码,showToggleButton:true})PasswordInput({value:$password,placeholder:隐藏切换按钮,label:密码,showToggleButton:false})}.width(100%).padding(20)}}7. 最大长度限制Entry Component struct PasswordExample7{State password:stringbuild(){Column({space:15}){PasswordInput({value:$password,placeholder:最多输入20个字符,label:密码,maxLength:20,hint:已输入${this.password.length}/20 个字符})}.width(100%).padding(20)}}8. 登录表单示例Entry Component struct LoginForm{State username:stringState password:stringbuild(){Column({space:20}){Text(用户登录).fontSize(24).fontWeight(FontWeight.Bold)TextInput({value:$username,placeholder:请输入用户名,label:用户名,required:true})PasswordInput({value:$password,placeholder:请输入密码,label:密码,required:true})Button(登录).width(100%).height(44).onClick((){// 处理登录逻辑})}.width(100%).padding(30)}}9. 注册表单示例Entry Component struct RegisterForm{State username:stringState password:stringState confirmPassword:stringbuild(){Column({space:20}){Text(用户注册).fontSize(24).fontWeight(FontWeight.Bold)TextInput({value:$username,placeholder:请输入用户名,label:用户名,required:true})PasswordInput({value:$password,placeholder:请输入密码,label:密码,required:true,showStrength:true,hint:密码应包含大小写字母、数字和特殊字符})PasswordInput({value:$confirmPassword,placeholder:请确认密码,label:确认密码,required:true,errorMessage:this.password!this.confirmPasswordthis.confirmPassword?两次输入的密码不一致:})Button(注册).width(100%).height(44).onClick((){// 处理注册逻辑})}.width(100%).padding(30)}}主题配置PasswordInput 的所有样式都通过ComponentTheme配置所有配置都在代码中不依赖JSON文件。修改默认颜色import{ComponentTheme}from../theme/ComponentTheme// 修改主色影响聚焦状态的边框颜色ComponentTheme.PRIMARY_COLOR#007AFF// 修改错误色影响错误状态的边框和提示颜色ComponentTheme.ERROR_COLOR#FF3B30// 修改边框颜色ComponentTheme.BORDER_COLOR#E5E5E5// 修改圆角ComponentTheme.BORDER_RADIUS8批量配置import{ComponentTheme}from../theme/ComponentTheme// 使用 setTheme 方法批量配置ComponentTheme.setTheme({primaryColor:#007AFF,errorColor:#FF3B30,borderRadius:8,spacing:16})最佳实践1. 尺寸选择推荐根据使用场景选择尺寸small用于紧凑空间、表格内输入medium默认尺寸适用于大多数场景large用于重要输入或大屏幕显示2. 密码强度显示注册场景建议开启showStrength帮助用户创建安全密码登录场景可以关闭showStrength简化界面密码修改建议开启showStrength确保新密码安全3. 显示/隐藏切换默认开启showToggleButton: true方便用户确认输入安全场景可以关闭切换按钮提高安全性公共环境建议关闭切换按钮防止密码泄露4. 验证规则长度验证使用maxLength限制最大长度格式验证通过errorMessage显示验证错误强度验证结合showStrength提示用户密码强度5. 用户体验实时反馈密码强度实时更新给用户即时反馈清晰提示使用hint提供密码要求说明错误提示使用errorMessage显示明确的错误信息常见问题Q1: 如何自定义密码强度计算规则A: 当前密码强度计算规则是内置的基于以下因素密码长度≥8个字符包含小写字母包含大写字母包含数字包含特殊字符如果需要自定义规则可以在外部监听value变化自行计算强度并显示。Q2: 如何禁用显示/隐藏切换功能A: 设置showToggleButton: falsePasswordInput({value:$password,showToggleButton:false})Q3: 如何隐藏密码强度显示A: 设置showStrength: false默认值PasswordInput({value:$password,showStrength:false})Q4: 密码强度如何计算A: 密码强度根据以下规则计算弱满足1-2个条件中满足3-4个条件强满足5个条件条件包括长度≥8、小写字母、大写字母、数字、特殊字符。Q5: 如何设置输入框宽度A: 使用inputWidth属性PasswordInput({value:$password,inputWidth:300// 固定宽度})PasswordInput({value:$password,inputWidth:100%// 百分比宽度})Q6: 如何实现密码确认验证A: 通过监听两个密码输入框的值进行比较State password:stringState confirmPassword:stringPasswordInput({value:$password,label:密码})PasswordInput({value:$confirmPassword,label:确认密码,errorMessage:this.password!this.confirmPasswordthis.confirmPassword?两次输入的密码不一致:})总结PasswordInput 是控件库中专用于密码输入的组件具有以下核心特性安全优先默认隐藏密码支持一键切换显示/隐藏强度提示实时显示密码强度帮助用户创建安全密码功能完整支持验证、提示、多种尺寸和状态易于使用简单的 API开箱即用主题配置所有样式都可通过代码配置品牌标识自动包含品牌标识保持视觉统一关键要点✅ 使用$variableName创建双向绑定✅ 使用showStrength显示密码强度✅ 使用showToggleButton控制显示/隐藏按钮✅ 使用label属性添加标签✅ 使用hint或errorMessage显示提示✅ 使用inputSize属性选择合适尺寸✅ 通过ComponentTheme自定义全局样式适用场景用户登录用户注册密码修改安全验证下一篇预告NumberInput数字输入框详解本文档属于《鸿蒙PC UI控件库开发系列文章》第8篇