EncryptedInput 一个加密输入框组件

EncryptedInput 组件文档

组件介绍

EncryptedInput 是一个加密输入框组件，基于 Ant Design Vue 的 a-input 组件封装。该组件的主要特点是用户输入时显示为星号（*），同时保持原始输入内容，适用于需要保护敏感信息的输入场景。

功能特性

• 输入时显示加密后的星号（*）
• 保持原始输入内容
• 支持 v-model 双向绑定
• 支持清空功能
• 支持禁用状态
• 支持最大长度限制
• 支持自定义占位符
• 正确处理退格键和分段输入

属性说明

属性名	类型	默认值	说明
modelValue	String	‘’	输入框的值，支持 v-model 双向绑定
placeholder	String	‘请输入’	输入框的占位文本
disabled	Boolean	false	是否禁用输入框
maxlength	Number	undefined	最大输入长度
showClear	Boolean	true	是否显示清除按钮

事件说明

事件名	参数	说明
update:modelValue	(value: string)	值更新时触发，用于 v-model 双向绑定
change	(value: string)	值变化时触发，参数为原始输入值

使用示例

基本使用

在表单中使用

带验证的使用

注意事项

1. 组件会自动处理加密显示，开发者不需要关心加密逻辑
2. 通过 v-model 绑定的值始终是原始输入值
3. 显示值会自动转换为星号
4. 组件支持表单验证
5. 支持清空功能
6. 支持禁用状态
7. 支持最大长度限制

实现原理

1. 使用 originalValue 存储原始输入值
2. 使用 encryptedValue 存储加密后的显示值
3. 通过 encrypt 方法将输入值转换为星号显示
4. 在输入和值变化时更新原始值和显示值
5. 通过 watch 监听外部值变化，保持同步

常见问题

1. Q: 为什么输入时显示的是星号？
   A: 这是组件的设计特性，用于保护敏感信息。实际存储的值是原始输入内容。

2. Q: 如何获取原始输入值？
   A: 通过 v-model 绑定的值就是原始输入值，不需要额外的方法获取。

3. Q: 支持哪些输入限制？
   A: 支持最大长度限制（maxlength）和禁用状态（disabled）。

4. Q: 如何处理清空操作？
   A: 组件内置了清空功能，点击清除按钮会同时清空原始值和显示值。

更新日志

v1.0.0

• 初始版本
• 实现基本加密输入功能
• 支持 v-model 双向绑定
• 支持常用属性配置