密码验证框组件
组件介绍
密码验证框是一个可以隐藏内容的组件，用户需要输入正确的密码才能查看被隐藏的内容。该组件支持自定义标题和提示文本，提供良好的用户体验。
属性说明
| 属性 | 说明 |
|---|---|
| pw (必需) | 设置验证密码 |
| title (可选) | 自定义标题文本（默认为「请输入密码查看内容」） |
| tip (可选) | 自定义提示文本（默认为空） |
| placeholder (可选) | 自定义密码输入框占位符文本（默认为「请输入密码」） |
| error (可选) | 自定义错误提示文本（默认为「密码错误，请重试」） |
使用示例
基础用法
这是需要密码才能查看的隐藏内容
自定义标题和提示
这是自定义标题和提示的示例
自定义占位符文本
这是自定义占位符文本的示例
自定义错误提示文本
这是自定义错误提示文本的示例
HTML 代码
html
<!-- 基础用法 -->
<password-box pw="12345">
<p>这是需要密码才能查看的隐藏内容</p>
</password-box>
<!-- 自定义标题和提示 -->
<password-box pw="secret" title="请输入访问码" tip="提示：访问码是 secret">
<p>这是自定义标题和提示的示例</p>
</password-box>
<!-- 自定义占位符文本 -->
<password-box pw="12345" placeholder="请输入您的访问密码">
<p>这是自定义占位符文本的示例</p>
</password-box>
<!-- 自定义错误提示文本 -->
<password-box pw="12345" error="访问码错误，请重新输入">
<p>这是自定义错误提示文本的示例</p>
</password-box>注意事项
- 该组件仅用于娱乐或非敏感内容的简单保护，不应用于安全要求较高的场景
- 密码以明文形式存储在 HTML 属性中，不具备安全性
- 具有良好的视觉效果和交互体验
- 增加加载状态反馈，提升用户体验