解决vue3中使用el-backtop 无效

最新推荐文章于 2024-05-21 12:20:58 发布
最新推荐文章于 2024-05-21 12:20:58 发布
阅读量1.2k 收藏
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwwwwwwwwwwwwwwl/article/details/129321030
版权

el-backtop需要指定target值，
在el-scrollbar下的el-backtop指定为.el-scrollbar__wrap
但是当在指定区域内滚动出现el-backtop需要额外指定el-scrollbar外div的class
因此，如下target=".layout-view .el-scrollbar__wrap"即可

<div class= "layout-view">
	<el-scrollbar>
		<el-backtop :right="100" :bottom="100" target=".layout-view .el-scrollbar__wrap">
			<el-icon><span class="icon iconfont icon-shengdanjianhuahuidaodingbu"></span></el-icon>
		</el-backtop>
	</el-scrollbar>
</div>
Wuli 王
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决ElementUI的el-backtop无效的问题
weixin_45714898的博客
06-29 5499
错误用法示例 1. 直接拷贝了elementui的示例代码，添加了bottom和visibility-height属性 2. 控制台报错Error in mounted hook: "Error: target is not existed: .page-component__scroll .el-scrollbar__wrap" 解决方法1 去掉target，直接使用el-backtop <template> <div id="app"> <d
vue elementUI回到顶部组件无法显示问题
weixin_44277937的博客
07-06 784
将elementUI官方的回到顶部组件代码复制过去不显示,困扰了很久 最后发现将这块给去掉就可以显示了 target=".page-component__scroll .el-scrollbar__wrap" <el-backtop :bottom="100"> <div style="{ height: 100%; width: 100%; background-color: #f2
Backtop 回到顶部失效? 手搓回到顶部按钮【基于vue自定义】
最新发布
General_D的博客
05-21 899
解决elemnt-ui的Backtop组件失效问题，两种方法帮你解决小烦恼~ 基于vue自定义一个回到顶部按钮，包含超视距显示、视距内隐藏、一键回到顶部，诸多丝滑小妙招等你来撩，阿巴阿巴~
Element UI中的BackTop无法使用的解决方案
Jesus_z的博客
03-02 5684
问题描述 最近在写个人博客时使用elementUI来作为前端框架，但是当我使用到BackTop时发现无法使用的现象。 具体表现为：滚动页面后该返回顶部按钮组件并没有出现。 ElementUI官网文档：https://element.eleme.cn/#/zh-CN/component/backtop 问题分析 在查阅了大量文章后，发现该组件的实用方式很简单，直接引入即可，如下图是最简单的...
Element UI 回到顶部el-backtop组件的教程或问题
PrimaryColor
07-14 2385
el-backtop组件使用 <template> <div class="container"> <div style="height:800px;"> ...//主要内容 </div> //回到顶部组件 target：回到指定类的顶部 visibility-height：滚动长度 <el-backtop target=".container" visibility-height="50">
el-backtop返回顶部的使用
敲代码无敌小奶龙的博客
08-26 745
el-backtop返回顶部的使用
el-backtop + el-scrollbar踩坑记录
sdasdadadad的博客
11-17 197
el-backtop + el-scrollbar踩坑记录
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
总结来说，当在 `el-tab-pane` 中使用 `v-show` 或 `v-if` 遇到问题时，可以考虑以下几点： 1. 理解 `v-show` 和 `v-if` 的工作原理及其与组件内部实现的交互。 2. 使用 `v-if` 代替 `v-show`，尽管这可能会导致性能...
解决vue中el-tab-pane切换的问题
10-15
在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是...
解决Vue对Element中的el-tab-pane添加@click事件无效
06-06
解决Vue对Element中的el-tab-pane添加@click事件无效
element ui 组件的库的Backtop用法，以及没有效果的问题
weixin_46174785的博客
08-05 1158
Backtop组件的基本用法： js代码 // 这个div标签叫作用是，滚动的到顶部的距离是以他基准，最好放到顶部 <div class='container'></div> <el-backtop target=".container" > <div class="toTop">Top</div> </el-backtop> css代码： .container { width: 100%; /
Element Backtop回到顶部的具体使用
m0_50125215的博客
11-04 999
解决element-ui el-backtop返回顶部组件无效问题 el-backtop绑定的盒子，需要一个滚动样式：overflow-y: scroll; <template> <div id="app"> <router-view /> <!-- 绑定app盒子 --> <el-backtop target="#app" :visibility-height="100" /> </div> &lt
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...
vue element-ui BackTop，el-backtop 改造，element 底部，拉到底部
小张的博客
01-07 1242
element-ui el-backtop 改造，添加拉到底部功能
element-ui 使用el-backtop无效问题
这是我的博客
03-31 6113
基本格式： <template> <el-backtop target=".父级盒子class" :visibility-height="100" :bottom="60"></el-backtop> </template> target可以省略，即： <el-backtop></el-backtop> 有时候会发现这...
用Vue写backToTop指令
weixin_35022783的博客
11-10 2863
用Vue写backToTop指令指令是Vue框架中非常有用，目前正在学习当中。以下是参照教程写的返回顶部backToTop指令，具有以下功能。 点击按钮后可以返回顶部。 当滚动到一定位置后出消失与隐藏。 还有待改进的地方。 代码中有2句是重复的。 未写到一个.vue文件中，复用性不高。以上两点努力在以后的学习中实现。 话不多说，直接上代码。 代码块<!DOCTYPE html> <html lan
element Backtop 回到顶部简单使用
林中明月间丶
04-20 2465
直接贴代码 拿去piao //默认的 <el-backtop :bottom="60"> </el-backtop> //带文字的 <el-backtop :bottom="60"> <div style="{ height: 100%; width: 100%; backgr...
在vue3中使用el-checkbox-group
12-21
在Vue 3中，使用`el-checkbox-group`可以实现多选框的功能。下面是一个示例代码： ```html <template> <el-checkbox-group v-model="selectedFruits"> <el-checkbox label="apple">Apple</el-checkbox> <el-checkbox label="banana">Banana</el-checkbox> <el-checkbox label="orange">Orange</el-checkbox> </el-checkbox-group> </template> <script> import { ref } from 'vue'; export default { setup() { const selectedFruits = ref([]); return { selectedFruits }; } }; </script> ``` 在上面的代码中，我们使用`el-checkbox-group`组件来创建一个多选框组。通过`v-model`指令将选中的值绑定到`selectedFruits`变量上。当用户选择或取消选择一个选项时，`selectedFruits`的值会自动更新。 你可以根据自己的需求修改选项的标签和值。在`selectedFruits`变量中，你可以获取到用户选择的所有值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值