element-ui之关于组件BackToTop回到顶部的使用

更新时间：2024年03月19日 09:38:00 作者：沏欢

这篇文章主要介绍了element-ui之关于组件BackToTop回到顶部的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element-ui组件BackToTop回到顶部的使用

详细参数查看官网文档BackToTop

方式1：直接添加使用

<div class="home">
	<el-backtop></el-backtop>
	<div class='content'></div>
</div>

方式2：添加target指定触发的对象

<div class="layout">
	<el-backtop target=".layout"></el-backtop>
	<div class='content'></div>
</div>

注意：

1）使用时放在触发滚动的对象里的第一个div的位置（即最前面）

2）还是无效时可以选择给触发滚动的对象添加以下样式

.layout {
  height: 100vh;/*注意，这里设了这个高度后，后期给window注册onscorll事件时，注册不上*/
  overflow-x: hidden;
}

element回到顶部组件使用注意事项（Backtop 回到顶部）

官网里面这个Backtop 回到顶部组件使用写的很简单，就这样

在这里插入图片描述

我们实际上使用这个组件，target对象是内容滚动的外部容器，并且这个容器的高度是100%是撑满整个屏幕的

写了个具体demo

例子如下：

<template>
  <!-- 外部容器 -->
  <div class="back-top-container">
    <!-- 实际滚动内容 -->
    <div v-for="(item,i) in 150" :key="i">这是文本{{ i }}</div>
    <!-- Backtop 回到顶部组件 -->
    <el-backtop target=".back-top-container" :bottom="100">
      <div
        style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
        margin-right:100px;
      }"
      >
        UP
      </div>
    </el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.back-top-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
</style>

效果图

在这里插入图片描述

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue的data为啥只能是函数原理详解
这篇文章主要为大家介绍了Vue的data为啥只能是函数原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue-router二级导航切换路由及高亮显示的实现方法
这篇文章主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
谈谈Vue.js——vue-resource全攻略
本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
el-upload http-request使用多个文件上传携带其他参数方式
这篇文章主要介绍了el-upload http-request使用多个文件上传携带其他参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
基于Vue3+Element Plus 实现多表单校验demo
表单校验在日常的开发需求中是一种很常见的需求,通常在提交表单发起请求前校验用户输入是否符合规则,通常只需formRef.value.validate()即可校验,本文给大家介绍基于Vue3+Element Plus 实现多表单校验demo,感兴趣的朋友一起看看吧
2024-06-06
如何利用vue3实现一个俄罗斯方块
俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
基于vue3+TypeScript实现一个简易的Calendar组件
最近在学习 react,在学习到使用 react 开发 Calendar 组件的时候,突然联想到使用 vue 进行 Calendar 功能的实现,因为目前使用的技术栈是 vue,刚好可以加深下对 vue3 和 ts 的使用印象,所以本文给大家介绍了基于vue3+TypeScript实现一个简易的Calendar组件
2024-05-05
Vue.prototype详解及使用方式
这篇文章主要介绍了Vue.prototype详解及使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
如何使用yarn创建vite+vue3&&electron多端运行
这篇文章主要介绍了如何使用yarn创建vite+vue3&&electron多端运行,本文分步骤给大家介绍的非常详细，包括使用yarn创建vite+vue3项目会遇到哪些问题，感兴趣的朋友跟随小编一起看看吧
2024-03-03
vue 运用mock数据的示例代码
本篇文章主要介绍了vue 运用mock数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11