75 lines
3.5 KiB
JSON
75 lines
3.5 KiB
JSON
{
|
||
"slug": "passwordinput",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 密码输入框：明文切换按钮与三段式强度条，按长度与字符类别分级提示。",
|
||
"usage": [
|
||
"v-model 绑定密码字符串，输入时同时 emit update:modelValue 与 change，两个事件载荷都是原始明文（PasswordInput.vue3.vue:64）。",
|
||
"明文切换由内部 visible ref 控制 input 的 type，按钮文案在「显示」「隐藏」间切换，不需要父组件传参（PasswordInput.vue3.vue:7）。",
|
||
"强度分 weak / mid / strong 三档，由长度 ≥8、大小写混合、含数字、含符号、长度 ≥12 五条加分累计得出（PasswordInput.vue3.vue:43）。",
|
||
"关闭强度条只需 :show-strength=\"false\"；该 prop 默认 true（PasswordInput.vue3.vue:36）。",
|
||
"强度文案由 tip computed 生成，例如「弱：建议使用字母、数字与符号组合」，随输入实时变化（PasswordInput.vue3.vue:57）。"
|
||
],
|
||
"bestPractices": [
|
||
"强度判定完全在前端做规则打分，没有字典或泄露库校验，不要把它当作安全策略的唯一依据（PasswordInput.vue3.vue:43）。",
|
||
"barClass 在没有密码时返回空串，三段色条不会显示任何状态；清空输入后强度条自动归零（PasswordInput.vue3.vue:69）。",
|
||
"visible 是内部状态，父组件无法预置为明文显示；需要初始明文展示时要改组件而不是传参（PasswordInput.vue3.vue:40）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端是受控写法：input 用 :value=\"modelValue\" 加 @input 回写，而不是用 v-model 绑内部状态，避免未传 v-model 时密码丢失。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "String",
|
||
"desc": "密码原文，v-model 绑定；默认空串"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "String",
|
||
"desc": "占位文案，默认「请输入密码」"
|
||
},
|
||
{
|
||
"name": "showStrength",
|
||
"type": "Boolean",
|
||
"desc": "是否显示三段强度条，默认 true"
|
||
},
|
||
{
|
||
"name": "update:modelValue",
|
||
"type": "emit(payload: String)",
|
||
"desc": "输入时回写密码原文"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "emit(payload: String)",
|
||
"desc": "与 update:modelValue 同载荷的独立事件"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"显示 / 隐藏切换是真实 button，但按钮文字在两种状态下都会改变，读屏用户只能靠读文字判断，建议同时维护 aria-pressed（PasswordInput.vue3.vue:14）。",
|
||
"强度条是三个空 span，仅靠背景色和随后的一段文字传达强弱，色觉障碍用户只能读到 tip 文案（PasswordInput.vue3.vue:19）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PasswordInput.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "passwordinput 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/PasswordInput.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"passwordinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/PasswordInput.vue3.vue:34 — defineProps 声明 modelValue/placeholder/showStrength",
|
||
"frameworks/PasswordInput.vue3.vue:38 — 双事件回写契约",
|
||
"frameworks/PasswordInput.vue3.vue:43 — 五条规则累计打分得出 weak/mid/strong",
|
||
"frameworks/PasswordInput.vue3.vue:40 — 明文切换由内部状态控制，无对应 prop"
|
||
]
|
||
}
|