vue+element-ui backtop组件使用

最新推荐文章于 2024-08-15 14:19:16 发布
最新推荐文章于 2024-08-15 14:19:16 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： element-ui 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35117063/article/details/103587438
版权
本文介绍了在Vue项目中使用Element-UI的Backtop组件遇到的问题及解决过程。在尝试复制官方代码未生效后，通过详细研究文档，发现需要自定义内容区才能使组件正常工作。
摘要由CSDN通过智能技术生成

element-ui中的backtop返回顶部组件的使用

最近写的项目中用到了vue和element-ui实现前端页面，在最后写到返回顶部的时候，看到有自带的组件就直接使用了，但是在copy代码进去之后发现没生效。

找了不少文章，有些是直接copy了官方的文档，有的是给出了 解决方案，但是没有说明，有点看不懂到底要怎么弄。

最后的最后，我差点就自己写原生。 最终因为懒就没有自己写。

所以我仔细观察了下官方文档的使用方法之后，得出结论，需要自己写个内容区。
<div class="content-area">
	<el-backtop target
最低0.47元/天 解锁文章
林深鹿
关注
专栏目录
vue+element-ui 回到顶部组件backTop
weixin_42598901的博客
08-16 1万+
<template> <div class="wraper"> <template> Scroll down to see the bottom-right button. <el-backtop target=".wraper"> &l...
Element-ui2 Backtop组件的正确使用方法
qq_46239972的博客
02-09 417
把target属性去掉 不用给html、body、#app等高度或溢出样式 可以放在组件内的任何位置
ElementUI - Backtop（回到顶部）组件使用方法
王佳斌
03-18 2651
前言 官方的示例描述的不太清楚，很多朋友直接复制发现并不生效。 如下图所示效果，可做成 全部页面生效 或 某个单独页面 生效。 解决方案 注意：我这里搞成了全局（所有页面都会生效），直接放在了 App.vue 了。 打开 App.vue ，复制以下代码： <!-- 样式您可以自行调整 --> <!-- 一些其他配置属性参考官网 --> <el-backtop :bottom="30"> <div style="{ height: 100%;
VUE 解决el-backtop无效问题
最新发布
weixin_44093889的博客
08-15 373
组件的el-backtop组件，但是使用之后没有效果。当然如果问题已经解决，那么恭喜你；项目需要实现回到顶部功能，使用。将backtop组件放在滚动容器里的第一个。我移动到最前面依然无效。查看滚动容器的css样式，设置高度以及滚动。
vue返回顶部的组件BackTop
m0_46217225的博客
06-15 1298
直接看代码： <template> <div @click="backTopBtn(move)"> <slot /> </div> </template> <script> export default { name: "BackTop", props: { move: { type: Number, default: 300, }, }, methods: {
element-ui Backtop组件的应用
7William的博客
04-20 195
element-ui Backtop组件的应用 官网示例 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 写得不太清楚 应用 <!-- 主体 --> <el-main&gt
Vue之elementUi的backToTop组件（回到顶部）用法
唐昊
08-01 1505
<template> <el-tooltip placement="top" content="回到顶部"> <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="0" transition-name="fade"/> </el-tooltip> </template> &lt
关于element-ui backtop 不生效，无显示
levi2469的博客
01-11 2881
1、不用target属性也可以使用 <el-backtop></el-backtop> 2、用target属性 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> target：指向需要
vue+element 回到顶部组件（Backtop）
z957778633的博客
08-27 833
1：把 回到顶部封装成一个公共组件 <template> <transition :name="transitionName"> // 回到顶部的一个动画 <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop" > <i class="el-icon-caret-to
vue+element-ui实现返回顶部
学习永无止境
08-31 1005
废话不多说，直接上代码。 html: <template> <div class="container"> //container必须写在最外面的盒子 <el-backtop target=".container"> <div class="toTop">Top</div> </el-backtop> <div v-for="index in 100" :key="index"&gt
vue element-ui BackTop，el-backtop 改造，element 底部，拉到底部
小张的博客
01-07 1301
element-ui el-backtop 改造，添加拉到底部功能
解决vue3中使用el-backtop 无效
欢迎来到我的小世界
03-03 1361
解决vue3中使用el-backtop 无效
实现vue返回顶部backTop组件
zezejingi的博客
12-29 643
实现vue返回顶部backTop组件，在一些页面比较长的时候，可能会用到回到顶部功能，一般都是右下角一个图标我们点击可以返回到顶部，这个功能还是蛮常见的在一些网页中，这个功能看起来还是蛮简单的，我们可以自由发挥。
el+vue 实战 ⑩ el-backtop背景图片自定义、el-link下划线颜色自定义
zujiasheng的博客
08-28 2313
el-backtop背景图片自定义、el-link下划线颜色自定义
vue-element-admin添加返回顶部功能
cyh的博客
03-10 886
vue-element-admin添加返回顶部功能 这里只针对在使用了vue-element-admin后台管理系统模板的同学 在@layout/index.vue中添加 el-backtop标签即可 <template> <div :class="classObj" class="app-wrapper"> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @clic
Vue 项目 backTop 点击回到顶部
Ton555555的博客
07-12 672
场景: 点击回到顶部, 到达顶部backTop 隐藏, 有滚动 显示 mounted() { setTimeout(() => { this.showScrollTop = document.body.scrollTop + document.documentElement.scrollTop + document.body.clientHeight > document.body.clientHeight // this
vue backtop全局回到顶部组件
莫不静好
08-14 1073
文章目录1、实现 BackTop.vue 组件页2、注册组件3、使用4、效果 背景：当页面内容很多时，为了方便用户快速回到顶部 1、实现 BackTop.vue 组件页 <template> <div class="pages-content-scroll"> <el-backtop target=".pages-content-scroll" :visibility-height="visibleHeight" :
Vue+element-ui Table二次封装实践详解
在基于Vue+element-ui的Table二次封装过程中，首先需要了解element-ui的Table组件的基本用法，包括数据绑定、列定义、事件处理等。例如，`<el-table-column>`用于定义表格的列，可以通过`prop`属性指定数据字段，`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值