element-ui backtop 组件源码分享

今日简单分享 backtop 组件的源码实现,从以下三个方面:

1、backtop 组件页面结构

2、backtop 组件属性

3、backtop 组件事件

一、backtop 组件页面结构

二、backtop 组件属性

2.1 target 属性,触发滚动的对象,类型 string,无默认值。

2.2 visibility-height 属性,滚动高度达到此参数值才出现,类型 number,默认值 200。

组件使用及展示效果:

2.3 right 属性,控制其显示位置, 距离页面右边距,类型 number,默认值 40。

组件使用及展示效果:

2.4 bottom 属性,控制其显示位置, 距离页面底部距离,类型 number,默认值 40。

组件属性使用及展示效果:

三、backtop 组件事件

3.1 click 事件,点击按钮触发的事件。

补充:requestAnimationFrame:window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

参考连接:Window:requestAnimationFrame() 方法 - Web API 接口参考 | MDN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 流(Stream)、文件(File)和IO

Java 流(Stream)、文件(File)和IO 目录 Java 流(Stream)、文件(File)和IO 读取控制台输入 从控制台读取多字符输入 从控制台读取字符串 控制台输出 实例 读写文件 FileInputStream FileOutputStream 实例 文件和I/O Java中的目录 创建目录: 读取目录 Ja…

GitLab介绍、安装、创建第一个项目

一、Gitlab介绍 GitLab是一个基于Web的DevOps平台,提供了Git仓库管理、问题跟踪、代码审查、CI/CD等一系列功能。它由Dmitriy Zaporozhets和Valery Sizov于2011年创建,旨在为开发团队提供一个集中式的项目管理解决方案。以下是GitLab的一些关键特点和功能: 1、代码管理 提供…

JavaGUI编程

目录 GUI概念 Swing概念 组件 容器组件 窗口(JFrame) 代码 运行 面板(JPanel) 代码 运行 布局管理器 FlowLayout 代码 运行 BorderLayout 代码 运行 GridLayout 代码 运行 常用组件 标签(JLabel) 代码 运…

HarmonyOS实战开发-WebSocket的使用。

介绍 本示例展示了WebSocket的使用,包括客户端与服务端的连接和断开以及客户端数据的接收和发送。 WebSocket连接:使用WebSocket建立服务器与客户端的双向连接,需要先通过createWebSocket方法创建WebSocket对象,然后通过connect…

HarmonyOS实战开发-证书管理、如何实现对签名数据进行校验功能。

介绍 本示例使用了ohos.security.certManager相关接口实现了对签名数据进行校验的功能。 实现场景如下: 1)使用正确的原始数据和签名数据进行签名校验场景:模拟服务端对签名数据进行校验,验证客户端身份和原始数据完整性。 2&…

多线程(46)线程局部存储

线程局部存储(Thread Local Storage, TLS)是一种允许数据在多个线程中被独立地存储的编程范式。在Java中,这通过ThreadLocal类实现,它提供了一种线程封闭的机制,确保每个线程都有自己的变量副本,从而避免了变量共享所带来的线程安…

MongoDB聚合运算符:$objectToArray

文章目录 语法使用例1,无内嵌文档的情况例2,有内嵌文档的情况 举例objectToAarray 举例使用objectToArray对内嵌字段求和 o b j e c t T o A r r a y 与 objectToArray与 objectToArray与arrayToObject一起使用的例子 $objectToArray聚合运算符用于将文档…

绝地求生:PUBG×杜卡迪联名上线!参与投稿评论赢取精美好礼

PUBG杜卡迪联名活动游戏内现已正式上线!我们诚邀与您一起在开拓未知战场和书写新历史的过程中,与杜卡迪一同实现您的极速梦想! 在本次的杜卡迪工坊中,更是包含了具备标志性红色在内的6种颜色供您自由选择,一起自由驰骋…

Redis入门到通过之Redis安装

文章目录 Redis安装说明1.单机安装Redis1.1.安装Redis依赖1.2.上传安装包并解压1.3.启动1.3.1.默认启动1.3.2.指定配置启动1.3.3.开机自启 2.Redis客户端2.1.Redis命令行客户端2.2.图形化桌面客户端2.2.1.安装2.2.2.建立连接 Redis安装说明 大多数企业都是基于Linux服务器来部…

【Python 小学低段竞赛数学题】数字5在书本页码中出现16次,这本书最多有多少页

书的页码编号是按1 2 3 4 5一直这样下去的,数字5恰好出现了16次,请问这本书最多可以有多少页? 包含5的页码: 5 15 25 35 45 50 51 52 53 54 55 56 57 58 59 65 需要注意页码55,出现了两次5。因此到59页就满足数字5出现…

力扣爆刷第117天之CodeTop100五连刷71-75

力扣爆刷第117天之CodeTop100五连刷71-75 文章目录 力扣爆刷第117天之CodeTop100五连刷71-75一、48. 旋转图像二、39. 组合总和三、113. 路径总和 II四、34. 在排序数组中查找元素的第一个和最后一个位置五、394. 字符串解码 一、48. 旋转图像 题目链接:https://le…

Swift中的布尔型

在Swift中,布尔型数据用Bool类型表示。布尔型数据只有两个可能的值:true和false。布尔型数据通常用于条件判断和逻辑运算。例如: let isTrue true let isFalse falseif isTrue {print("这是真的") } else {print("这是假的…

GPT中的Transformer架构以及Transformer 中的注意力机制

目录 1 GPT中的Transformer架构 2 transformer中的注意力机制 参考文献: 看了两个比较好的视频,简单做了下笔记。 1 GPT中的Transformer架构 GPT是Generative Pre-trained Transformer单词的缩写,其中transformer是一种特定的神经网络&a…

如何排查k8s集群中Pod内mysqld进程占用内存消耗过高?

文章目录 1. **查看容器资源使用情况**:2. **进入容器内部**:3. **检查进程内存使用**:4. **MySQL服务器状态检查**:5. **MySQL日志分析**:6. **使用专门的MySQL监控工具**:7. **配置文件检查**&#xff1a…

Java基础07--多线程-网络编程-Java高级

一、多线程 1.认识多线程 ①线程 ②多线程 2.创建线程方式 ①方式一:继承Thread类 1.让子类继承Thread线程类 2.重写run方法,就是这个线程执行会执行的操作。 3.创建继承Thread的子类对象就代表一个线程 4.启动线程:.start()-自动执行run方法 注意&am…

全量知识系统 程序详细设计之 统一资产模型(QA-SmartChat)

Q1. 下面我们聊聊整个全知系统的设计 的矩阵和函数,矩阵表示的是“活物”,分别 类似 一个基因的活性、一个实体的辨识度和某种特征的可区分度。 函数的可微、可积和可导性 则表示 运动的控制方式 在全知系统设计中,矩阵和函数是两个核心的组…

Java中的Set、List、Map的区别及主要实现类方法

Java中的Set、List、Map的区别 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),JAVA集合可以存储和操作数目不固定的一组数据。 所有的JAVA集合都位于 java.util包中! JAVA集合只能存放引…

Linux netstat命令教程:网络统计工具(附实例详解和注意事项)

Linux netstat命令介绍 netstat(网络统计)是一个在Linux中用于显示网络相关信息并诊断各种网络问题的命令。它可以显示你的计算机正在进行的连接、发送信息的路径,甚至一些技术细节,如正在发送或接收的数据包的数量。 Linux net…

速盾:CDN是怎么防止ddos攻击的?

CDN(内容分发网络)是一种用于提高网站性能和安全性的重要技术。它通过在全球多个位置分布节点来存储和分发网站内容,以减少用户访问网站时的延迟并提高网站的可用性。除了提供高质量的内容分发,CDN还能有效地防止DDoS攻击。 DDoS…

Frida 远程RPC 调用进阶

引言: 今天讲下Frida 远程RPC 调用,为什么要用它,方便快捷。 安卓IOS 简单适用,代码量少很多,比Xposed。 1,安卓调用: 安卓调用,一般我们使用usb,模拟器的话直接用adb 命令去直连都可以,但是我这里叫一个稳定的方法,使用wifi adb ,比较靠谱,设置模拟器的ip,然…