el-backtop详解

el-backtop 是 Element Plus 框架中的回到顶部组件，用于在页面滚动到一定距离后显示一个按钮，点击该按钮可以快速回到页面顶部。

一。 el-backtop 属性详解

1. visibility-height:

   • 类型: Number
   • 用途: 页面滚动超过这个高度时显示回到顶部按钮。
   • 默认值: 200

2. target:

   • 类型: String | HTMLElement
   • 用途: 滚动的目标容器，默认为 window。
   • 默认值: window

3. right:

   • 类型: Number
   • 用途: 按钮距离右侧的距离。
   • 默认值: 40

4. bottom:

   • 类型: Number
   • 用途: 按钮距离底部的距离。
   • 默认值: 40

二。 el-backtop 事件详解

1. click:

   • 类型: Function
   • 用途: 点击回到顶部按钮时触发。
   • 参数: event（点击事件对象）

三。 el-backtop 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义回到顶部按钮的内容。

四。示例代码

<template>
  <div>
    <h2>Backtop 示例</h2>

    <!-- 基本用法 -->
    <el-backtop :visibility-height="200" :target="target"></el-backtop>

    <!-- 自定义样式 -->
    <el-backtop :visibility-height="300" :right="50" :bottom="50" :target="target">
      <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;">
        <i class="el-icon-top" style="font-size: 24px;"></i>
      </div>
    </el-backtop>

    <!-- 监听点击事件 -->
    <el-backtop :visibility-height="200" :target="target" @click="handleClick">
      <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;">
        <i class="el-icon-top" style="font-size: 24px;"></i>
      </div>
    </el-backtop>

    <!-- 长内容模拟滚动 -->
    <div style="height: 2000px;">
      <p v-for="n in 100" :key="n">这是第 {{ n }} 行内容</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const target = ref('#scroll-container')

const handleClick = (event) => {
  ElMessage({
    message: '点击了回到顶部按钮',
    type: 'success'
  })
}
</script>

五。 代码解释

1. 基本用法:

   • 使用 el-backtop 组件并设置 visibility-height 和 target 属性来指定按钮显示的高度和滚动的目标容器。

   • <el-backtop :visibility-height="200" :target="target"></el-backtop>
     

2. 自定义样式:

   • 使用 right 和 bottom 属性自定义按钮的位置，并使用默认插槽自定义按钮的内容。

   • <el-backtop :visibility-height="300" :right="50" :bottom="50" :target="target">
       <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;">
         <i class="el-icon-top" style="font-size: 24px;"></i>
       </div>
     </el-backtop>
     

3. 监听点击事件:

   • 使用 @click 事件监听点击回到顶部按钮时的事件。

   • <el-backtop :visibility-height="200" :target="target" @click="handleClick">
       <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;">
         <i class="el-icon-top" style="font-size: 24px;"></i>
       </div>
     </el-backtop>
     

4. 长内容模拟滚动:

   • 在页面中添加长内容以模拟滚动效果。

   • <div style="height: 2000px;">
       <p v-for="n in 100" :key="n">这是第 {{ n }} 行内容</p>
     </div>