iter(g51): 新增 backTop 返回顶部按钮
This commit is contained in:
@@ -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 传入该元素",
|
||||
"点击平滑回顶;系统开启「减少动效」时改为瞬间跳转"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user