119 lines
4.5 KiB
JSON
119 lines
4.5 KiB
JSON
{
|
|
"slug": "input",
|
|
"end": "vue2",
|
|
"curated": true,
|
|
"summary": "Vue 2 输入框，接收 value 并通过 input 事件回传新值，可直接写 v-model。",
|
|
"usage": [
|
|
"Vue 2 端 v-model 依赖 value 这个 prop 与 input 事件，写 v-model=\"form.name\" 即可，不需要 .sync。",
|
|
"input 事件的参数是原生 e.target.value 字符串，而不是原生事件对象，直接赋给绑定的字段即可。",
|
|
"点击 clearable 的清除按钮时组件会额外派发一次 input，且值为空字符串。",
|
|
"前后缀内容要写进具名插槽 <template #prefix> / <template #suffix>，外层元素仅在插槽存在时才渲染。",
|
|
"type=\"password\" 时组件会自动追加一个明暗文切换按钮，切换只看内部 showPassword，不改你传的 type。"
|
|
],
|
|
"bestPractices": [
|
|
"错误提示需要 error 与 errorText 同时给：只有 error 为 true 且 errorText 非空才会渲染 .error-text。",
|
|
"把 ref=\"input\" 交给组件内部使用，组件在 clear 之后用 $nextTick 调 $refs.input.focus() 保持焦点，外部不要再占用同名 ref。",
|
|
"需要用 .number 修饰符时写 v-model.number；组件本身只做字符串回传，不做类型转换。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "Vue 2 端载体是 8 个 props 加 input/focus/blur 三个事件与 prefix/suffix 两个插槽，共 13 项可溯源 API。",
|
|
"table": [
|
|
{
|
|
"name": "value",
|
|
"type": "String | Number，默认空串",
|
|
"desc": "当前值，v-model 的接收端"
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "String，默认 'default'",
|
|
"desc": "取值 large / default / small，对应 kole-input-lg/md/sm"
|
|
},
|
|
{
|
|
"name": "type",
|
|
"type": "String，默认 'text'",
|
|
"desc": "透传给原生 input，如 text / password / number"
|
|
},
|
|
{
|
|
"name": "placeholder",
|
|
"type": "String，默认空串",
|
|
"desc": "原生 placeholder"
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "Boolean，默认 false",
|
|
"desc": "禁用态，清除按钮同时隐藏"
|
|
},
|
|
{
|
|
"name": "error",
|
|
"type": "Boolean，默认 false",
|
|
"desc": "错误态，给外层加 has-error"
|
|
},
|
|
{
|
|
"name": "errorText",
|
|
"type": "String，默认空串",
|
|
"desc": "错误文案，与 error 同时为真才显示"
|
|
},
|
|
{
|
|
"name": "clearable",
|
|
"type": "Boolean，默认 false",
|
|
"desc": "有值且未禁用时显示清除按钮"
|
|
},
|
|
{
|
|
"name": "input",
|
|
"type": "事件，参数为新值字符串",
|
|
"desc": "输入或清除时触发，v-model 依赖它"
|
|
},
|
|
{
|
|
"name": "focus",
|
|
"type": "事件，参数为原生事件",
|
|
"desc": "原生 focus 透传"
|
|
},
|
|
{
|
|
"name": "blur",
|
|
"type": "事件，参数为原生事件",
|
|
"desc": "原生 blur 透传"
|
|
},
|
|
{
|
|
"name": "prefix",
|
|
"type": "插槽",
|
|
"desc": "左侧前缀内容"
|
|
},
|
|
{
|
|
"name": "suffix",
|
|
"type": "插槽",
|
|
"desc": "右侧后缀内容"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"清除按钮与密码切换按钮都带动态 aria-label（「清除」「显示密码」「隐藏密码」），图标按钮对读屏器有名字。",
|
|
"错误态通过外层的 has-error 类表达，若要读屏器感知请再配合说明文字或在业务侧补 aria-describedby。",
|
|
"原生 <input> 承担 disabled，禁用时不可聚焦也不参与表单提交。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/Input.vue2.vue",
|
|
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
|
"desc": "Input.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
|
},
|
|
{
|
|
"file": "frameworks/Input.css",
|
|
"kind": "样式文件",
|
|
"desc": "Input.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"input-ex-1",
|
|
"input-ex-5",
|
|
"input-ex-6",
|
|
"input-ex-3"
|
|
],
|
|
"notes": [
|
|
"props 声明见 frameworks/Input.vue2.vue:55-63，其中 value 接受 String 或 Number。",
|
|
"input 事件在 frameworks/Input.vue2.vue:83 派发 e.target.value，清除按钮在第 86 行派发空串。",
|
|
"prefix/suffix 插槽分别在 frameworks/Input.vue2.vue:4 与 45，外层用 v-if=\"$slots.prefix\" 控制。",
|
|
"实测该端声明 props 恰好 8 个：value、size、type、placeholder、disabled、error、errorText、clearable。"
|
|
]
|
|
}
|