050_Backtop回到顶部

最新推荐文章于 2025-09-24 12:05:26 发布

原创最新推荐文章于 2025-09-24 12:05:26 发布 · 707 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

element-ui 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element UI的Backtop组件，通过实例展示了如何配置回顶按钮的位置、触发条件，并提供了两种实现方式：基础用法和自定义显示内容。适合前端开发者学习Element UI的使用和自定义组件开发。

1. Backtop回到顶部

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

1.2. Attributes

参数	说明	类型	可选值	默认值
target	触发滚动的对象	string	无	无
visibility-height	滚动高度达到此参数值才出现	number	无	200
right	控制其显示位置, 距离页面右边距	number	无	40
bottom	控制其显示位置, 距离页面底部距离	number	无	40

1.3. Events

事件名	说明	回调参数
click	点击按钮触发的事件	点击事件

1.4. 注释: 不建议使用target属性, 极其难以使用。

2. Backtop回到顶部例子

2.1. 使用脚手架新建一个名为element-ui-backtop折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Backtop from '../components/Backtop.vue'
import MyselfBacktop from '../components/MyselfBacktop.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Backtop' },
  { path: '/Backtop', component: Backtop },
  { path: '/MyselfBacktop', component: MyselfBacktop }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Backtop.vue

<template>
  <div class="myPage">
    <h1>基础用法</h1>
    <h4>滑动页面即可看到右下方的按钮。</h4>
    <el-backtop :bottom="600"></el-backtop>
  </div>
</template>

<style scoped>
  .myPage {
    width: 100%;
    height: 1500px;
  }
  .myPage h1 {
    margin-top: 300px;
  }
</style>

2.4. 在components下创建MyselfBacktop.vue

<template>
  <div class="myPage">
    <h1>自定义显示内容</h1>
    <el-backtop :visibility-height="10" :bottom="600"><div class="up">UP</div></el-backtop>
  </div>
</template>

<style scoped>
  .myPage {
    width: 100%;
    height: 1500px;
  }
  .myPage .up {
    width: 100%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0,0,0, .12);
    text-align: center;
    line-height: 40px;
    color: #1989fa;
  }
</style>

2.5. 运行项目, 访问http://localhost:8080/#/Backtop