elementPlus——backtop 使用无效问题

最新推荐文章于 2024-08-15 14:19:16 发布
最新推荐文章于 2024-08-15 14:19:16 发布
阅读量494 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_52065282/article/details/131413440
版权

名称说明类型默认值
target触发滚动的对象string—
visibility-height滚动高度达到此参数值才出现number200
right控制其显示位置，距离页面右边距number40
bottom控制其显示位置，距离页面底部距离number40

 

 没写target就出现了backtop不生效问题，加上target属性后就可以了。

tips:

  • 注意backtop组件存放位置
  • 注意官方文档说明，细节！细节！
哇哈2023
关注
Web前端篇——ElementUI的Backtop 不显示问题
u011391361的博客
01-03 2624
ElementUI的Backtop 不显示问题
vue3 Element-Plus el-backtop无效问题
极星(*^_^*)的博客
03-12 1863
基本格式： <template> <div class="box"> <el-backtop target=".box" :visibility-height="100" :bottom="60" :right="20"></el-backtop> <div> 页面........ </div> </div> </template> 有时候会发现这个根本无效，那么父级盒子最好设
[BUG记录] Element Plus 的 Backtop 组件未生效
ymzhao
06-14 1890
vue项目，页面使用了 Element Plus 的 Scrollbar 组件包裹。在页面内引入 Backtop 组件，未随着页面滚动生效
element-ui element-plus backtop - 分析
huxianc的博客
12-01 880
源代码地址 <template> <transition name="el-fade-in"> <div v-if="visible" :style="{ 'right': styleRight, 'bottom': styleBottom }" class="el-backtop" @click.stop="handleClick" > &lt.
使用element回到顶部组件报错“Error: target is not existed: .page-component__scroll .el-scrollbar__wrap“
IU
01-18 1762
官方例子 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 其中这个target 在文档中是这样的 触发滚动的对象( 官网页面的 class 个人项目需要变化) 可使用如下方法 简单粗暴 <el-bac
Element Backtop回到顶部的具体使用
10-15
在你的Vue模板中，你可以像下面这样引入并使用它： ```html <!-- 页面内容 --> <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> ``` 这里，`target`属性非常重要，它指定...
element 回到顶部组件使用注意事项 （Backtop 回到顶部）
学而时习之，不亦说乎。
08-23 1288
前言 官网里面这个Backtop 回到顶部组件使用写的很简单，就这样 我们实际上使用这个组件，target对象是内容滚动的外部容器，并且这个容器的高度是100%是撑满整个屏幕的，写了个具体demo例子如下： <template> <!-- 外部容器 --> <div class="back-top-container"> <!-- 实际滚动内容 --> <div v-for="(item,i) in 150" :key="i"
Element ui Backtop 回到顶部 问题&解决方法
qq_33164351的博客
03-04 1010
(Element ui Backtop 回到顶部 问题&解决方法) 1.位置 <template> <div class="Box"> <el-backtop><div>UP</div></el-backtop> //放在内容的上面 <div>------内容------</div> </div> </template 2.用官网的例子不显示 <
【区分vue2和vue3下的element UI Backtop 回到顶部组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-17 961
在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，Backtop组件用于快速回到页面顶部，但它们在细节上可能有所不同，尤其是在属性和事件的支持上。不过，基本的功能和用法是相似的。
elementUI的el-backtop(返回顶部)不生效
weixin_54930261的博客
12-30 5592
这个是基础用法，自定义用法跟这个也差不多，就是中间加了些样式。看起来这个例子很简单对不对，按照最简单的原则拿过来就用，Ctrl+C到自己项目后就等着出现回到顶部按钮，结果实际结果却令我大失所望，直接报错了。，心想这下子应该是可以了吧。结果运行的时候错误是没有了，但是那个心心念念的回到顶部按钮怎么都出现不了，难道是我姿势不对？目前我采用的方法是简单粗暴的删除target不指定对象， 也是能显现按钮，并且回到顶部。既然给出了原因，那解决应该很简单，不是找不到这个样式吗，那我就在外层套个。的功能的时候遇到坑了。
VUE 解决el-backtop无效问题
最新发布
weixin_44093889的博客
08-15 710
组件的el-backtop组件，但是使用之后没有效果。当然如果问题已经解决，那么恭喜你；项目需要实现回到顶部功能，使用。将backtop组件放在滚动容器里的第一个。我移动到最前面依然无效。查看滚动容器的css样式，设置高度以及滚动。
Element UI中的BackTop无法使用的解决方案
Jesus_z的博客
03-02 5876
问题描述 最近在写个人博客时使用elementUI来作为前端框架，但是当我使用到BackTop时发现无法使用的现象。 具体表现为：滚动页面后该返回顶部按钮组件并没有出现。 ElementUI官网文档：https://element.eleme.cn/#/zh-CN/component/backtop 问题分析 在查阅了大量文章后，发现该组件的实用方式很简单，直接引入即可，如下图是最简单的...
Backtop 回到顶部失效? 手搓回到顶部按钮【基于vue自定义】
General_D的博客
05-21 1911
解决elemnt-ui的Backtop组件失效问题，两种方法帮你解决小烦恼~ 基于vue自定义一个回到顶部按钮，包含超视距显示、视距内隐藏、一键回到顶部，诸多丝滑小妙招等你来撩，阿巴阿巴~
关于element-ui backtop 不生效，无显示
levi2469的博客
01-11 3132
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：指向需要
设置overflow auto后，elementui的backtop不生效
weixin_42598278的博客
02-12 191
如果在Element UI中的backtop组件上设置了overflow: auto，那么backtop就不会生效。这是因为overflow: auto会导致元素的溢出内容被修剪，并且可以通过滚动条查看。因此，如果backtop组件的位置在已修剪的内容中，它将不可见，并且不会起作用。为了解决这个问题，你需要在backtop组件上添加一个position：fixed属性，使其始终位于视图中。 ...
vue elementUI回到顶部组件无法显示问题
weixin_44277937的博客
07-06 907
将elementUI官方的回到顶部组件代码复制过去不显示,困扰了很久 最后发现将这块给去掉就可以显示了 target=".page-component__scroll .el-scrollbar__wrap" <el-backtop :bottom="100"> <div style="{ height: 100%; width: 100%; background-color: #f2
element 解决 Error: target is not existed: .page-component__scroll .el-scrollbar__wrap
qq_35770559的博客
11-06 9269
element 解决 Error: target is not existed: .page-component__scroll .el-scrollbar__wrap 初次使用element的Backtop 回到顶部组件的伙伴们，把官网代码复制到页面使用时难免会遇到这个问题： 大概意思是 .page-component__scroll 和 .el-scrollbar__wrap这两个目标不存在，接下来我们再来看看官网的文档介绍: 例子这里的target触发滚动的对象，应该是对应触发滚动class,看看控
Element 组件 | el-backtop 组件实现回到底部
啥都要.
06-28 692
示例采用 Scrollbar + Backtop 组件实现，模拟异步获取数据后，根据滚动容器高度及滚动位置判断是否展示回到底部按钮。
el-backtop关于 target is not existed: .page-component__scroll .el-scrollbar__wrap的问题
zhaoz的博客
07-19 1329
element的官网提供了两种 但是我们复制到项目中会发现控制台报 target is not existed: .page-component__scroll .el-scrollbar__wrap的问题 这里以第二种为例： <el-backtop :bottom="10" :right="0"> <div style="{ height: 100%; width: 100%; border-radius: 50%; fo
elment-ui中的Backtop组件如何使用
04-11
Backtop组件是一个可以快速返回页面顶部的按钮，可以通过以下步骤使用： 1. 在需要使用的页面中引入Backtop组件：import { Backtop } from 'element-ui'; 2. 在模板中使用Backtop组件： <!-- 其他页面内容 --...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值