社交和门户网站的区别,网站建设企业合作邀请函,网站系统安全防护体系建设方案 下载,白银市住房和城乡建设厅网站首页hook 本质是一个函数#xff0c;可以把 setup 函数中使用的 Composition API 进行封装。
hook 类似于 Vue2 中的 mixin 混合。
自定义 hook 的优势#xff1a;复用代码#xff0c;让 setup 中的逻辑更加清晰易懂。 自定义hook函数#xff1a; 1、在 src 目录下创建 hooks… 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 函数。
templatediv classpagediv :style{ backgroundColor: move 50 ? aqua : red }导航栏/div/div
/templatescript
// 引入 hook 文件
import useScroll from ../hooks/useScroll;
export default {name: Home,setup() {// 调用 hook 函数并接收返回值let move useScroll();// 返回数据return { move }}
}
/scriptstyle 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
