【区分vue2和vue3下的element UI Backtop 回到顶部组件，分别详细介绍属性，事件，方法如何使用，并举例】

加仑小铁

于 2024-07-17 08:37:25 发布

阅读量686

点赞数 13

分类专栏： Element 文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/xiejunlan/article/details/140483782

版权

Element 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，Backtop 组件用于快速回到页面顶部，但它们在细节上可能有所不同，尤其是在属性和事件的支持上。不过，基本的功能和用法是相似的。

Vue 2 + Element UI 的 `el-backtop`

在 Vue 2 中，Element UI 提供了 el-backtop 组件用于快速回到页面顶部。

属性（Props）

target: 指定滚动的目标元素，默认为 window。
visibility-height: 滚动高度达到此参数值才出现 BackTop，默认为 200。
custom-style: 自定义样式，可以是一个对象。

事件（Events）

click: 点击回到顶部按钮时触发。

方法（不直接暴露）

el-backtop 组件通常不直接暴露方法供外部调用。

示例

<template>
  <div style="height: 2000px;">
    <el-backtop target=".page-content" :visibility-height="100" @click="handleClick">
      <!-- 你可以在这里自定义按钮内容，但默认会使用 Element UI 的样式 -->
    </el-backtop>
    <div class="page-content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击了回到顶部按钮');
      // 注意：这里的点击事件主要是用于处理额外的逻辑，
      // 实际回到顶部的行为是由 el-backtop 组件内部处理的。
    },
  },
};
</script>

<style>
/* 如果需要，可以在这里添加自定义样式，但通常不需要，因为 el-backtop 有默认的样式 */
</style>

注意：在上面的示例中，target=".page-content" 可能并不完全必要，除非你有特定的滚动容器。在大多数情况下，默认的 target="window" 就足够了。

Vue 3 + Element Plus 的 `ElBacktop`

在 Vue 3 和 Element Plus 中，ElBacktop 组件的用法与 Vue 2 中的 el-backtop 非常相似，但可能会有一些小的改进或变更。

属性（Props）

target: 指定滚动的目标元素，默认为 window。
visibility-height: 滚动高度达到此参数值才出现 BackTop，默认为 200。
right: 距离容器右侧的距离，默认为 40px。
bottom: 距离容器底部距离，默认为 40px。
custom-style: 自定义样式，可以是一个对象。

事件（Events）

click: 点击回到顶部按钮时触发。

方法（不直接暴露）

与 Vue 2 类似，ElBacktop 组件通常不直接暴露方法供外部调用。

示例

<template>
  <div style="height: 2000px;">
    <el-backtop
      :right="30"
      :bottom="30"
      @click="handleClick"
    >
      <!-- 自定义内容（如果需要） -->
    </el-backtop>
    <!-- 页面内容 -->
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleClick() {
      console.log('点击了回到顶部按钮');
    },
  },
});
</script>

<style>
/* 自定义样式（如果需要） */
</style>

在这个 Vue 3 + Element Plus 的示例中，你可以看到如何调整 right 和 bottom 属性来改变 ElBacktop 组件的位置，以及如何处理点击事件。其他用法与 Vue 2 中的 el-backtop 非常相似。