65 lines
2.8 KiB
JSON
65 lines
2.8 KiB
JSON
{
|
|
"slug": "backtotop",
|
|
"end": "vue2",
|
|
"curated": true,
|
|
"summary": "Vue 2 回到顶部按钮，滚动超过阈值才显示，圆环指示整体阅读进度。",
|
|
"usage": [
|
|
"Vue 2 端 threshold 控制显示阈值，默认 400 像素，滚动超过后加 is-visible 类显示按钮。",
|
|
"圆环进度由进度值驱动：用 strokeDasharray 与 strokeDashoffset 两个内联样式画出已完成比例。",
|
|
"showRing 为 false 时不仅不渲染 SVG，还给根节点加 kole-no-ring 类。",
|
|
"点击调用 window.scrollTo 的 smooth 行为滚回顶部。"
|
|
],
|
|
"bestPractices": [
|
|
"滚动的最大值计算为 scrollHeight 减 innerHeight，内容不足一屏时该值为 0，实现里用三元判断避免除零得到 NaN。",
|
|
"滚动监听以 passive: true 注册，不会阻塞滚动线程。",
|
|
"组件在 mounted 时会主动调一次 onScroll，所以刷新页面时若已在下方，按钮能立即正确显示。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "Vue 2 端 2 个 prop、0 事件；进度与可见性都是内部状态，由 window 滚动监听更新。",
|
|
"table": [
|
|
{
|
|
"name": "threshold",
|
|
"type": "Number，默认 400",
|
|
"desc": "显示按钮的滚动阈值，单位像素"
|
|
},
|
|
{
|
|
"name": "showRing",
|
|
"type": "Boolean，默认 true",
|
|
"desc": "是否渲染进度圆环；为假时加 kole-no-ring 类"
|
|
},
|
|
{
|
|
"name": "is-visible",
|
|
"type": "根节点状态类",
|
|
"desc": "滚动超过阈值后由组件动态添加"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"根节点是 div 加 role=\"button\" 与 aria-label=\"返回顶部\"，读屏器能识别为可操作控件。",
|
|
"虽然标了 role=\"button\"，但没有 tabindex 与键盘事件，实际不可通过键盘触发。",
|
|
"按钮箭头 ↑ 是文本，与 aria-label 并存不会造成读屏器重复播报（label 优先）。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/BackToTop.vue2.vue",
|
|
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
|
"desc": "BackToTop.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
|
},
|
|
{
|
|
"file": "frameworks/BackToTop.css",
|
|
"kind": "样式文件",
|
|
"desc": "BackToTop.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"backtotop-ex-1"
|
|
],
|
|
"notes": [
|
|
"props 声明见 frameworks/BackToTop.vue2.vue:16-19。",
|
|
"进度与可见性计算见 frameworks/BackToTop.vue2.vue:28-36，被动监听注册在第 39 行。",
|
|
"role=\"button\" 与 aria-label 见 frameworks/BackToTop.vue2.vue:3。",
|
|
"is-visible 与 kole-no-ring 由模板 :class 动态绑定，见 frameworks/BackToTop.vue2.vue:2。"
|
|
]
|
|
}
|