1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Backtop：
在你的 Vue 组件中导入 Backtop，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-backtop :bottom="50" :right="50"></el-backtop>
<!-- 你的页面内容 -->
</div>
</template>
<script>
import { ElBacktop } from 'element-plus';
export default {
components: {
ElBacktop,
},
};
</script>
在上述代码中，我们导入了 ElBacktop 组件，并在模板中使用它。通过 bottom 和 right 属性设置 Backtop 按钮距离底部和右侧的距离。
3. 自定义 Backtop：
你可以根据需要自定义 Backtop，例如，添加自定义图标、设置滚动阈值等：
<template>
<div>
<el-backtop :bottom="50" :right="50" :visibility-height="100" target=".custom-scroll">
<img src="custom-arrow-up.png" alt="回到顶部" style="width: 40px; height: 40px;">
</el-backtop>
<div class="custom-scroll" style="height: 300px; overflow-y: scroll;">
<!-- 你的页面内容 -->
</div>
</div>
</template>
<script>
import { ElBacktop } from 'element-plus';
export default {
components: {
ElBacktop,
},
};
</script>
在这个例子中，我们通过在 ElBacktop 内部添加一个 img 元素来自定义 Backtop 按钮的图标。通过 visibility-height 属性设置 Backtop 按钮在滚动多少距离后显示。通过 target 属性设置滚动监听的元素。
转载请注明出处：http://www.zyzy.cn/article/detail/5586/ElementPlus