4.9 KiB
4.9 KiB
::: title 基础使用
回到顶部组件的默认样式，lay-backtop 会自动寻找最近的可滚动祖先元素，也可以使用 target 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
::: ::: demo
:::
:::title 自定义
回到顶部组件可自定义样式，限制宽高：50px * 50px，showHeight = 0 将始终显示，disabled 属性禁用返回顶部。查看页面右下角的圆形按钮。
::: demo
:::
::: title 滚动容器
通过设置 target 和 position="absolute"参数，可对特定容器进行返回顶部操作
::: ::: demo
内容
:::
::: title 属性 :::
::: table
| 属性 | 说明 | 类型 | 可选值 |
|---|---|---|---|
| 通用属性 | |||
| target | 可选，触发滚动事件的对象 | string | CSS 选择器 | window(默认) |
| showHeight | 可选，滚动高度达到该值后显示回到顶部按钮 | number | 200(默认) |
| disabled | 可选，禁用点击返回顶部 | boolean | true | false(默认) |
| 组件样式 | |||
| position | 可选，定位方式，特定容器内部需设置为 absolute | string | absolute | fixed(默认) |
| right | 可选，按钮距离页面右边距，单位 px | number | 30(默认) |
| bottom | 可选，按钮距离页面底部位置，单位 px | number | 40(默认) |
| bgcolor | 可选，背景颜色 | string | #9F9F9F(默认) |
| opacity | 可选，不透明度 | number | 0.0-1.0 |
| color | 可选，前景颜色 | string | #FFFFFF |
| borderRadius | 可选，添加圆角 | string | 2px(默认) |
| circle | 可选, 使用圆形按钮 | boolean | true | false(默认) |
| 图标样式 | |||
| icon | 可选,图标类型 | string | layui-icon-top(默认) |
| iconSize | 可选,图标大小 | number | 30 |
| iconPrefix | 可选,图标前缀 layui-icon layui-icon-top | string | layui-icon(默认) |
| iconColor | 可选,图标颜色 | string | #FFFFFF(默认) |
:::
::: title 事件 :::
::: table
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击回到顶部按钮的回调函数 | event |
:::
::: title 插槽 :::
::: table
| 插槽名 | 说明 |
|---|---|
| — | 自定义内容 |
:::