iter(g51): 新增 backTop 返回顶部按钮

This commit is contained in:
HIsheR
2026-10-26 12:15:03 +08:00
parent 1eff67bccb
commit b93b6dd09b
12 changed files with 224 additions and 10 deletions
+36 -1
View File
@@ -63,7 +63,8 @@
"cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作",
"splitter(props):可拖拽分栏容器,分隔条支持指针拖拽 / 方向键微调 / 双击复位,sizes 为百分比数组信号",
"autoComplete(props):输入联想,输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起,options 可传函数做远程联想",
"datePicker(props):日期选择,单月网格 + 翻月 / 今天快捷键,value 为 YYYY-MM-DD 信号,min/max 闭区间限制,方向键逐日逐周可导航"
"datePicker(props):日期选择,单月网格 + 翻月 / 今天快捷键,value 为 YYYY-MM-DD 信号,min/max 闭区间限制,方向键逐日逐周可导航",
"backTop(props):返回顶部悬浮按钮,越过阈值才浮现,外环 conic-gradient 显示已滚比例,点击平滑回顶"
],
"keyTypes": [
"ButtonProps",
@@ -2169,6 +2170,40 @@
"min / max 为闭区间,越界日期置灰不可点也不可键盘选中",
"value 传信号即受控;Esc 收起(与弹窗/抽屉共用逐层关闭栈)"
]
},
{
"id": "backTop",
"title": "返回顶部 BackTop",
"demo": "sec-backtop",
"props": [
{
"n": "target",
"t": "HTMLElement | Window",
"d": "监听的滚动容器;缺省 window(整页)"
},
{
"n": "threshold",
"t": "number",
"d": "滚动超过多少像素才浮现;缺省 300"
},
{
"n": "progress",
"t": "boolean",
"d": "是否显示滚动进度环;缺省 true"
},
{
"n": "onClick",
"t": "() => void",
"d": "回顶之后的回调(适合埋点)"
}
],
"example": "backTop({ threshold: 300, onClick: () => toast.info('已回到顶部') })",
"steps": [
"把返回的元素挂到页面任意位置即可,组件自身 position: fixed 定位在右下角",
"滚动越过 threshold 才浮现(淡入 + 上移微动画),回到阈值内自动隐藏",
"progress 为 true 时外环弧长等于已滚比例;内滚容器用 target 传入该元素",
"点击平滑回顶;系统开启「减少动效」时改为瞬间跳转"
]
}
]
}