71 lines
3.2 KiB
JSON
71 lines
3.2 KiB
JSON
{
|
||
"slug": "passwordinput",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 passwordinput：v-model 绑整串明文，显隐切换是组件内部状态，强度条由五条规则打分得出。",
|
||
"usage": [
|
||
"绑定是 `value` 加 `input`：onInput 里 `this.$emit('input', e.target.value)` 与 change 一起抛（第 64-65 行），`v-model` 拿到的始终是明文。",
|
||
"显隐按钮改的是 data.visible（第 39 行），只切 input 的 :type，不改变对外值，因此父组件无法控制初始是否可见。",
|
||
"`:show-strength` 为真才渲染那三条 .kole-pwd-bar（第 18 行），条数固定三根，强弱由 barClass(i) 决定点亮几根。"
|
||
],
|
||
"bestPractices": [
|
||
"强度算法在 computed.level 里（第 42-53 行）：长度≥8、大小写混用、含数字、含符号、长度≥12 各计一分，≤2 分 weak、3 分 mid、其余 strong。",
|
||
"提示文案随 level 变化（tip 计算属性，第 55-59 行），空值时不显示提示，接入时不要另外维护一套文案。",
|
||
"聚焦态用 @focus / @blur 改 data.focused 并换成 is-focus 类（第 11-12 行），没有 v-model 参与，纯视觉反馈。"
|
||
],
|
||
"a11y": [
|
||
"显隐按钮是原生 button 且文字在「显示」「隐藏」之间切换（第 14-16 行），状态可读，键盘可切换。",
|
||
"强度条是三个空 span，只靠类名上色，没有角色与文本，屏幕阅读器读不出强度；需要可读时应在外部补文字说明。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 3 项（value/placeholder/showStrength，frameworks/PasswordInput.vue2.vue:33-37）加 input 与 change 事件；强度与提示是组件内计算属性。",
|
||
"table": [
|
||
{
|
||
"name": "placeholder",
|
||
"type": "String",
|
||
"desc": "占位提示文本（frameworks/PasswordInput.vue2.vue:9）"
|
||
},
|
||
{
|
||
"name": "showStrength",
|
||
"type": "Boolean",
|
||
"desc": "是否显示强度（frameworks/PasswordInput.vue2.vue:18）"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "属性",
|
||
"desc": "PasswordInput 的绑定值，input 的 :value 与强度计算都读它（frameworks/PasswordInput.vue2.vue:34,8,43）"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "(val: any) => void",
|
||
"desc": "值变化时触发（frameworks/PasswordInput.vue2.vue:65）"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/PasswordInput.vue2.vue:4）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PasswordInput.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/PasswordInput.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"passwordinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/PasswordInput.vue2.vue:34-36；emit 在第 64-65 行，一次抛 input 与 change。",
|
||
"data 第 39 行的 visible/focused 与 computed 的 level/tip 都是内部状态，不对外暴露。"
|
||
]
|
||
}
|