Vue自定义hook函数


hook 本质是一个函数,可以把 setup 函数中使用的 Composition API 进行封装。

hook 类似于 Vue2 中的 mixin 混合。

自定义 hook 的优势:复用代码,让 setup 中的逻辑更加清晰易懂。

自定义hook函数:
1、在 src 目录下创建 hooks 文件夹,在文件夹中创建 hook 文件。

:hook 文件命名一般用 use 开头,例如 useScroll.js 等。

2、在 hook 文件中写入以下内容,获取页面滚动条距离顶部的位置。

import { ref, onMounted, onBeforeUnmount } from "vue";export default function () {// 定义 ref 数据let scrollTop = ref(0);// 创建事件函数const saveScroll = () => {// 获取页面滚动条距离顶部的位置scrollTop.value = window.scrollY;console.log(scrollTop.value);};// 挂载后给 window 绑定 scroll 事件onMounted(() => {window.addEventListener("scroll", saveScroll);});// 卸载前给 window 解绑 scroll 事件onBeforeUnmount(() => {window.removeEventListener("scroll", saveScroll);});// 返回数据return scrollTop;
}

:在 hook 函数中,可以使用任意的组合式 API 。

3、在需要使用的页面中引入并调用 hook 函数。

<template><div class="page"><div :style="{ backgroundColor: move < 50 ? 'aqua' : 'red' }">导航栏</div></div>
</template><script>
// 引入 hook 文件
import useScroll from '../hooks/useScroll';
export default {name: "Home",setup() {// 调用 hook 函数,并接收返回值let move = useScroll();// 返回数据return { move }}
}
</script><style scoped>
.page {height: 2000px;
}.page div {width: 100%;line-height: 50px;text-align: center;position: fixed;top: 0;
}
</style>

4、最终效果

:当滚动条距离页面顶部小于 50 时,导航栏显示为青色。

:当滚动条距离页面顶部大于 50 时,导航栏显示为红色。

原创作者:吴小糖

创作时间:2023.12.5 

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

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

相关文章

跨境电商与本土文化融合:推动全球商业合作

随着全球经济的日益一体化&#xff0c;跨境电商成为推动全球商业合作的重要力量。在这个数字化时代&#xff0c;跨境电商不仅在商品流通上起到了桥梁作用&#xff0c;更在文化交流方面发挥了积极的作用。本文将深入探讨跨境电商如何与本土文化融合&#xff0c;以及这种融合如何…

GItLab项目导入到HBuilderX中,下载TortoiseGit 安装

1.项目拉取 选择你要下载的项目,选master下完后内部在切换想要分支,一般选http下载,下图我选的是ssh下载 选择导入,git导入 复制上地址 如果提示这个点击确定 找到下图位置安装 2.TortoiseGit 下载安装 TortoiseGit 官网下载地址&#xff1a;Download – TortoiseGit – Wind…

做一个类似东郊到家的上门服务类系统有哪些功能?

上门服务系统是一款便捷的技师接单、上门提供理疗服务的软件。我们拥有优秀的开发团队&#xff0c;为您量身定制解决方案&#xff0c;价格合理&#xff0c;用心服务。 预约上门&#xff1a;该功能是预约上门推拿理疗按摩系统软件小程序APP的核心功能。消费者通过系统预约下单&a…

待办事项app推荐哪一款?每日待办事项提醒用什么APP

每天的生活中&#xff0c;我们总是充满着各种待办事项&#xff0c;如果不及时处理&#xff0c;就会导致各种问题的出现。在众多的待办事项app中&#xff0c;如何选择一款最适合自己的app呢&#xff1f;所谓待办事项&#xff0c;通常是指尚未着手的事项。在日常生活中&#xff0…

求臻医学胃癌关爱日:美味的高“盐”值杀手

胃癌的发病率具有广泛的地域差异&#xff0c;在东南亚国家尤为高发。韩国是胃癌发病率排名第一的国家&#xff0c;其次为日本&#xff0c;中国紧随其后&#xff0c;由于中国人口基数大&#xff0c;其绝对患胃癌人数为全球第一&#xff0c;每年有100多万新诊断患者&#xff0c;其…

大文本限制录入文字后通过输入法鼠标单击还可继续超限额录入问题

textInpEl.on(keyup propertychange, "textarea", function () { var realMaxLength $(this).parent().parent().find(".maxNum").text(); //真实的最大长度 var endFontLen $(this).val().length; if (endFontLen < rea…

基于springboot的滑雪场管理系统源码

&#x1f345; 简介&#xff1a;500精品计算机源码学习&#xff0c;有8个项目关注搏主即可领取。另送简历模板、答辩模板、学习资料、答辩常见问题【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 文末获取源码 目录 一、以下学…

CentOS安装Docker

Docker 分为 CE 和 EE 两大版本。CE 即社区版&#xff08;免费&#xff0c;支持周期 7 个月&#xff09;&#xff0c;EE 即企业版&#xff0c;强调安全&#xff0c;付费使用&#xff0c;支持周期 24 个月。 Docker CE 分为 stable test 和 nightly 三个更新频道。 官方网站上…

[足式机器人]Part2 Dr. CAN学习笔记-数学基础Ch0-3线性化Linearization

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-数学基础Ch0-3线性化Linearization 1. 线性系统 Linear System 与 叠加原理 Superposition2. 线性化&#xff1a;Taylor Series3. Summary 1. 线性系统 Linear System 与 叠加原理 Superposition…

智慧物联可视化大屏赋能设备管理和城市运行

在智慧物联的时代&#xff0c;万物互联的网络正在构筑起一个智能化的世界。无论是家居设备、汽车、还是工业设备&#xff0c;都能通过互联网实现智能化管理和控制。随着物联网技术的发展&#xff0c;我们迅速步入了一个千姿百态的智慧时代。智慧物联逐渐渗透进我们的日常生活&a…

Vmware虚拟机简介和安装

作者&#xff1a;余小小 常见的虚拟机 vmwarevirtualBox Vmware 运行在win系统上centos运行在Vm上 先安装vm&#xff0c;在安装centos系统 Vmware介绍 不用分区或者重开机&#xff0c;就可以在同一台pc上使用多种操作系统完全隔离&#xff0c;且保护不同的操作系统环境和文…

基于PIPNet的人脸106关键点检测

做美颜需要使用到人脸关键点&#xff0c;所以整理了一下最近的想法。 按模型结构分类&#xff1a; 1.Top-Down: 分为两个步骤&#xff0c;首先&#xff0c;对于原始输入图片做目标检测&#xff0c;比如做人脸检测&#xff0c;将人脸区域抠出&#xff0c;单独送进关键点检测模…

如何清理电脑缓存?简单几个步骤轻松搞定

清理电脑缓存的方法 下面我们为大家总结了一些可以用于清理电脑缓存的方法&#xff1a; 清理浏览器缓存 浏览器缓存是电脑为了我们能够更加快速的访问页面而临时保存的数据&#xff0c;随着时间的推移&#xff0c;浏览器缓存也会越来越多&#xff0c;这样不仅不会加快网页访…

广州华锐视点:VR仿真实训室中控系统成为VR课堂教学必备工具

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐走进我们的生活。从游戏娱乐到医疗教育&#xff0c;VR技术的应用范围日益广泛。近年来&#xff0c;VR技术在教育领域的应用也取得了显著的成果&#xff0c;为提高教育质量和培养创新人才提供了全…

24V-36v转3.3/5/9/12V芯片3A可调降压ic

一款高效、多功能的24V-36V转3.3/5/9/12V芯片3A可调降压IC 在当今电子设备日益普及的时代&#xff0c;电源管理显得尤为重要。为了满足各种设备的需求&#xff0c;一款高效、多功能的电源转换器成为工程师们的重要选择。本文将为您介绍一款24V-36V转3.3/5/9/12V芯片3A可调降压…

视频推拉流直播点播EasyDSS平台点播文件加密存储的实现方法

视频推拉流直播点播系统EasyDSS平台&#xff0c;可提供流畅的视频直播、点播、视频推拉流、转码、管理、分发、录像、检索、时移回看等功能&#xff0c;可兼容多操作系统&#xff0c;还能支持CDN转推&#xff0c;具备较强的可拓展性与灵活性&#xff0c;在直播点播领域具有广泛…

使用C语言创建高性能网络爬虫IP池

目录 一、引言 二、IP池的设计 1、需求分析 2、架构设计 3、关键技术 三、IP池的实现 1、存储实现 2、调度实现 3、通信实现 4、异常处理实现 四、代码示例 五、性能优化 六、测试与分析 七、结论 一、引言 随着互联网的快速发展&#xff0c;网络爬虫成为了获取…

这个工具真好用!一个网站轻松搞定电子书

相信很多朋友在寻找电子书资源的时候都会遇到一些困难&#xff0c;比如下载慢、格式不兼容等等。小边最近找到了这款制作电子书工具&#xff0c;无需下载&#xff0c;格式也很齐全&#xff0c;几乎可以满足所有人的需求。 想要电子书制作工具的可以在评论区踢我&#xff0c;现…

ffmpeg格式转换 免费使用视频格式转换教程

下载安装 首先去官网下载ffmpeg的软件包https://ffmpeg.org/ 如果是windows可以在直接下载编译好的软件包 https://www.gyan.dev/ffmpeg/builds/ 进入解压后的目录&#xff0c;子目录bin中的ffmpeg.exe就是我们要使用的转换器 视频信息查看 打开cmd控制台&#xff0c;从…

换元法求不定积分

1.一般步骤&#xff1a;选取换元对象&#xff08;不一定是式子中的值&#xff0c;也可以是式子中的最小公倍数或者最大公因数&#xff09;&#xff0c;然后将dx换为dt*t的导数&#xff0c;再用t将原式表示&#xff0c;化简计算即可 2. 3. 4. 5. 6.