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,一经查实,立即删除!

相关文章

JavaGUI编程

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

HarmonyOS实战开发-WebSocket的使用。

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

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

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

绝地求生: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服务器来部…

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…

点亮一颗 LED: 单片机 ch32v003 (RISC-V) 使用 rust 编写固件

首发日期 2024-04-09, 以下为原文内容: 使用 rust 编写单片机的程序 ? 很新, 但没问题. 使用 RISC-V CPU 的单片机 (比如 ch32v003) ? 也没问题. 同时使用 ? 哦嚯, 问题出现了 !! ch32v003 是一款使用 rv32ec 指令集的国产单片机, 很便宜 (某宝零卖只要 0.4 元一个, 在同档…

简单了解JVM

一.JVM简介 jvm及Java virtual machineJava虚拟机,它是一个虚构出来的计算机,一种规范。其实抛开这么专业的句子不说,就知道 JVM 其实就类似于一台小电脑运行在 windows 或者 linux 这些操作系统环境下即可。它直接和操作系统进行交互&#…

Handler——小白能懂的原理,老鸟需要的面经

1.机制学习 1.1Handler定义 发送并处理 与线程的消息队列关联的Message和Runnable 1.2基本用法 1、Message.obtain() 从消息池取得Message 2、Handler().sendMessage(msg) 发送消息 3、Handler().post 将Runnable包装成Message发送 以下提供一个结构代码 import android.os.H…

VMware导出虚拟机vmkd格式转换qcow2

VMware虚拟机导出qcow2格式可以上传至云服务 1、需要导出的虚拟机 2、克隆虚拟机 3、选择克隆源 4、创建完整克隆 5、完成 6、找到VMware安装路径 7、找到vmware-vdiskmanager所在路径使用cmd或Windows PowerShell进入目录 进入vmware-vdiskmanager目录 cd F:\软件\VMware Wo…

debian安装和基本使用

debian安装和基本使用 文章目录 debian安装和基本使用1. 为什么选择debian2. 如何下载Debian2.1 小型安装镜像2.2 完整安装镜像 3. Debian操作系统安装3.1 创建Debian虚拟机3.2 安装操作系统 4. Debian系统的初始设置4.1 桌面环境的配置4.2 配置网络4.3 生效网络配置4.4 配置de…

React 快速入门:掌握前端开发的核心技能

React 快速入门:掌握前端开发的核心技能 一、React 简介1.1 React 的历史1.2 React 的概念1.3 React 的特点1.4 React 的官网地址 二、开发环境搭建三、React 基础3.1 JSX3.2 组件3.3 Props3.4 State3.5 props 和 state 的区别3.6 Hook 四、React 生命周期五、添加样…

Redis Pipelining 底层原理分析及实践

作者:vivo 互联网服务器团队-Wang Fei Redis是一种基于客户端-服务端模型以及请求/响应的TCP服务。在遇到批处理命令执行时,Redis提供了Pipelining(管道)来提升批处理性能。本文结合实践分析了Spring Boot框架下Redis的Lettuce客户端和Redisson客户端对…

Unity构建详解(7)——AssetBundle格式解析

【文件格式】 文件可以分为文本文件、图片文件、音频文件、视频文件等等,我们常见的这些文件都有行业内的标准格式,其意味着按照一定的规则和规范去保存读取文件,可以获取我们想要的数据。 有些软件会有自己的文件格式,会按照其…

风储微网虚拟惯性控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 风储微网虚拟惯性控制系统simulink建模与仿真。风储微网虚拟惯性控制系统是一种模仿传统同步发电机惯性特性的控制策略,它通过集成风力发电系统、储能系统和其他分…

如何动态渲染HTML内容?用v-html!

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

计算机网络知识等汇总补充

计算机网络知识汇总补充 一、四次挥手1、为什么TCP要等待2MSL2、如果说一个系统中,有大量的time_wait和close_wait,会是什么原因? 二、你是怎么解决粘包问题?三、你觉得哪些场景适合redis四、redis的持久化策略五、你会怎么保证my…

4-云原生监控体系-Grafana-基本使用

1. 介绍 使用Grafana,您可以通过漂亮、灵活的仪表板创建、探索和共享所有数据。查询、可视化、提醒和理解您的数据,无论数据存储在何处。 图片出处: https://grafana.com/grafana/ 官方网站 2. 界面介绍 Connections 可以配置数据源&#x…