Backtop 回到顶部

返回页面顶部的操作按钮。

import { createApp } from 'vue'
import { ElBacktop } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElBacktop)

基础用法

通过滑动来查看容器右下角的按钮，点击后会滚动到目标容器的顶部。

自定义内容

显示区域固定为 40px × 40px，其中的内容可以自定义。

自定义位置

通过 right 和 bottom 属性来控制按钮的显示位置。

指定触发容器

通过 target 指定滚动容器的 CSS 选择器，让按钮可以挂在局部容器上。

API

Backtop Attributes

属性名	说明	类型	默认值
target	触发滚动的对象（CSS 选择器）	string	—
visibility-height	滚动高度达到此值才出现	number	200
right	距离页面右边距	number	40
bottom	距离页面底部距离	number	40

Backtop Events

事件名	说明	参数
click	点击按钮触发	(event: MouseEvent)

Backtop Slots

插槽名	说明
default	自定义按钮内容

更多信息见 Element Plus Backtop 文档。