在element ui中使用顶部返回

最新推荐文章于 2024-05-08 17:25:47 发布

原创最新推荐文章于 2024-05-08 17:25:47 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

在ElementUI的使用过程中，遇到一个问题：当设置el-backtop组件的target属性为'.page-component__scroll.el-scrollbar__wrap'时，内容无法显示且报错。解决方案是移除该target属性。只需保留简单的`<el-backtop></el-backtop>`标签，返回顶部功能即可正常工作。

部署运行你感兴趣的模型镜像

在使用element ui中返回顶部时，不显示内容还会报错：

只要将 target=".page-component__scroll .el-scrollbar__wrap" 去掉即可显示出来

<template>
  <el-backtop></el-backtop>
</template>

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

给予恩惠

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ElementUI - Backtop（回到顶部）组件使用方法

🏆 前端领域优质创作者

03-18

3021

前言官方的示例描述的不太清楚，很多朋友直接复制发现并不生效。如下图所示效果，可做成全部页面生效或某个单独页面生效。解决方案注意：我这里搞成了全局（所有页面都会生效），直接放在了 App.vue 了。打开 App.vue ，复制以下代码：   <el-backtop :bottom="30"> <div style="{ height: 100%;

vue+element-ui初始化表格时某一列根据后台返回内容显示不同的icon

1 条评论

鱼游星火 2023.07.18
完美解决了我的问题！

Element-UI组件实现全局回到顶部功能

实践求真知

08-21

2157

目录一项目创建步骤二删除不必要的文件三删除不必要的代码四安装element-ui 五启动项目六测试七正式编写的代码八测试效果九源码地址一项目创建步骤 1创建项目 vue create ele-components 2选择必要组件 ? Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Su...

Element-ui 组件 backtop回到顶部

最新发布

weixin_70777902的博客

05-08

908

首先我们可以先去element-ui官网进行查看参数有target：就是元素定义的class类名visibility-height: 鼠标向下滚动到自己定义的数值后出现返回顶部标签right:控制其显示位置，距离页面右边距bottom：控制其显示位置，距离页面左边距。

Element-ui返回顶部（踩坑指南，绝对有效）！！！

weixin_43751946的博客

01-28

7084

之前一直用的是自己封装监听滚动距离来实现返回顶部，想用一次element来实现，下面记录详细踩坑过程。下面图为官方文档： target这个属性及其重要，它代表你要监听滚动的对象！！！如果不对是不会触发的上详细代码 <div class="backtop" style="height: 800px;overflow-y: auto"> <div v-for="item in 500">{{item}}</div> //target属性的值指向的就是外层你滚

Element Backtop回到顶部的具体使用

10-15

在Element UI中，`Backtop`组件是用于实现页面滚动到顶部功能的一个实用工具，尤其在用户滚动长页面时，能方便地将页面快速滚动回顶部。 **基础用法** `Backtop`组件的基础用法相当简单。在你的Vue模板中，你可以像...

element ui 返回顶部不生效问题

he3236220的博客

03-26

633

父元素滚动 <template> <div class="content"> <div class="backtop"> <ul> <li>xjais1</li> <li>xjais2</li> <li>xjais3</li> <li>xjais4</li&

Vue Element UI快速返回页面顶部功能组件介绍

由于组件使用了Vue和Element UI，自定义通常涉及修改组件的props、修改样式文件或者在组件内部的逻辑中添加特定的自定义代码。 7. **兼容性和可维护性** 在设计这样的组件时，开发者需要考虑其在不同浏览器上的...

element-ui 实现响应式导航栏的示例代码

10-15

在本文中，我们将深入探讨如何使用Element UI框架实现响应式导航栏。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的UI元素，用于快速构建美观的前端界面。然而，它默认并不提供传统的顶部导航栏组件，因此...

Vue进阶（幺伍叁）：Vue-highlight 实现代码高亮_vue heightlight

2401_84437691的博客

04-27

632

支持几十种编程语言（点击下载），既包括常见的Cjavajavascriptrubypythonhtmlcsssql等，还支持apachenginx这些配置文件的语法。除了引入文件外，还需要引入样式文件。只是实现了代码高亮的功能，安装包里是没有css样式文件，因此我们还需要安装一个来实现真正的样式。

vue使用elementui的Backtop 回到顶部

yuan5211215的博客

11-03

210

直接上使用代码放到对应的盒子里面刚开始把<template>去掉了死活不显示，气死！！！ content的样式要设置高度，overflow-y：scroll；

element -ui 返回顶部

weixin_46031116的博客

05-26

525

<div class="headContainer"> //target要指向触发滚动的对象 <el-backtop target=".headContainer"> <i class="el-icon-caret-top"></i> </el-backtop> </div> 三行代码搞定如果不行就在父盒子加上样式中加上这个2个属性: .headContainer { height:..

Vue之elementUi的backToTop组件（回到顶部）用法

唐昊

08-01

1656

<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

js 回到顶部逻辑实现和elementUI源码解析

qq_42683219的博客

11-16

1818

大家或多或少都会遇到“回到顶部”这样的需求，在此分享这个技术点以及可能遇到的问题。再分析element源码。回到顶部关键技术点在backTopClickHandle函数中在该函数中，首先判断当前是否存在定时器，如果有下面步骤不执行。否则获取滚动条高度, 启动定时器，在定时器中计算出当前滑动速度，并计算出当前滚动条高度。最后如果滚动条高度小于等于0，清除定时器。在backTopClickHandle函数中有两点需要特别注意 scrollTop的位置在setInterval(() => {…})内，效果图

关于element-ui el-backtop返回顶部组件无效问题

a5252145的博客

12-18

6800

关于element-ui el-backtop返回顶部组件无效问题 el-backtop绑定的盒子，需要一个滚动样式：overflow-y: scroll; <template> <div id="app"> <router-view /> // 绑定app盒子 <el-backtop target="#app" :vis...

Vue进阶（八十一）：Vue+element UI 实现“回到顶部”按钮组件

IT全栈华强工作室

11-05

4524

介绍这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。使用示例 <template> <div id="app">...

elementUI返回状态快速显示

大雾起了清晨

07-27

333

elementUI返回状态快速显示

elementUI 返回上一个页面

07-08

865

There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should leave quickly.

关于element 回到顶部的使用方法

withme

11-30

2227

1、新建一个组件 2、引用改改位置 ok // 组件内容 <template> <transition name="el-fade-in"> <div v-if="visible" @click.stop="handleClick" :style="{ 'right': styleRight, 'bottom': styleBottom }" class="el-backtop">