92 lines
3.8 KiB
JSON
92 lines
3.8 KiB
JSON
{
|
||
"slug": "button",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 按钮组件，用 props 传类型与尺寸，点击通过 @click 事件回传原生事件对象。",
|
||
"usage": [
|
||
"Vue 2 端用 @click=\"submit\" 监听点击，回调拿到的是原生 MouseEvent，不是包装过的对象。",
|
||
"type 与 size 只接受白名单取值，写错时 Vue 会打印 validator 警告而不是静默降级。",
|
||
"按钮文字既能用 text=\"提交\" 传，也能直接写在标签中间，标签内容会覆盖 text。",
|
||
"图标用 icon 传 SVG 的 path d 字符串，组件内部只渲染 <path :d=\"icon\">，不加载外部图标库。",
|
||
"loading 为 true 时按钮自身会同时置灰并停止派发 click。"
|
||
],
|
||
"bestPractices": [
|
||
"loading 与 disabled 不必同时传：loading 已经让 onClick 提前 return，并给根节点加上 is-loading。",
|
||
"样式里只有 :focus-visible 的描边，用鼠标点不会出现焦点环；若需要键盘可见性请勿手写 :focus 覆盖。",
|
||
"size 映射由 computed classes 完成（large→btn-lg、default→btn-md、small→btn-sm），不要直接手写 btn-lg 类名。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 API 载体是 props 与 emit：6 个 prop 声明加 1 个 click 事件，没有回调 prop。",
|
||
"table": [
|
||
{
|
||
"name": "type",
|
||
"type": "String，默认 'default'",
|
||
"desc": "取值 primary / default / text / link / danger，由 validator 校验"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "String，默认 'default'",
|
||
"desc": "取值 large / default / small，映射到 btn-lg / btn-md / btn-sm"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "禁用态，与 loading 一起决定原生 disabled 属性"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "加载态，显示 spinner 并让 onClick 直接 return"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"type": "String，默认空串",
|
||
"desc": "SVG 的 path d 字符串，例如 \"M12 5v14M5 12h14\""
|
||
},
|
||
{
|
||
"name": "text",
|
||
"type": "String，默认空串",
|
||
"desc": "按钮文案，作为默认插槽的兜底内容"
|
||
},
|
||
{
|
||
"name": "click",
|
||
"type": "事件，参数为原生事件对象",
|
||
"desc": "点击时触发，禁用或加载中不会派发"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "插槽",
|
||
"desc": "按钮内容插槽，有内容时优先于 text"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"根节点是原生 <button>，回车与空格触发由浏览器提供，键盘可达无需额外处理。",
|
||
"加载中的 <span class=\"spinner\"> 带 aria-hidden=\"true\"，不会把装饰性动画念给读屏器。",
|
||
"禁用由原生 :disabled 落地（disabled || loading），读屏器与 Tab 键都能正确跳过。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Button.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Button.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Button.css",
|
||
"kind": "样式文件",
|
||
"desc": "Button.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"button-ex-1",
|
||
"button-ex-4",
|
||
"button-ex-5"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Button.vue2.vue:23-30，type 与 size 的 validator 分别在第 24、25 行。",
|
||
"click 事件在 frameworks/Button.vue2.vue:45 派发，前置的 disabled/loading 判断在同一方法内。",
|
||
"默认插槽位于 frameworks/Button.vue2.vue:16，写成 <slot>{{ text }}</slot>。"
|
||
]
|
||
}
|