Composition API思想封装NProgress示例详解
正文
最近在用vue3封装一套后台管理模版,自然会用到NProgress
。如果你没有用过,你可以看一下instagram
,youtube
这些网站,它们都有一个顶部加载条,这也是现在最流行的网页加载条。
于是我发现了@vueuse/integrations
中的useNProgress
,我们先看一下Anthony Fu大神如何去封装的,然后咱们再去试着自己实现一下。
安装和基本使用
npm i nprogress @vueuse/integrations
基本使用如下,我们在定义vue-router
的地方使用
//router.js import { createRouter, createWebHashHistory } from 'vue-router' import { useNProgress } from '@vueuse/integrations/useNProgress' // 通过useNProgress,导出一个isLoading const { isLoading } = useNProgress(null,{ showSpinner: false }) const router = createRouter({ history: createWebHashHistory(), routes:[/*省略路由*/] }) // 在路由进入和离开的时候时候,改变isLoading router.beforeEach((to, from, next)=>{ isLoading.value = true next() }) router.afterEach((to, from, next)=>{ isLoading.value = false next() }) export default router
这样就是实现了一个基本的进度条,具体效果大家可以自行尝试一下。
发现这个时候,我感觉很惊叹,从来没想过第三方库也可以这样的通过Composition API与vue去结合。而且,理论上这样封装我们是可以跨框架使用的。
自己实现一个
首先,我们定义一个入口函数,同时通过ref来定一个isLoading
,同时为了兼容vue2,我们可以使用vue-demi
这个库。
import { ref, watch } from 'vue-demi' import nprogress from 'nprogress' export const useNProgress = ()=>{ const isLoading = ref(false) watch(isLoading,(newVal)=>{ if(newVal){ return nprogress.start() } return nprogress.done() }) return { isLoading } } export default useNProgress
这样就可以说完成了基本的封装,但是并不完美,watch并不是最好的解决方案,我在这里还有2种更好解决方法。
- computed + set:其实
computed
是可以修改的,只需要指定它的set就可以了 - 摒弃通过变量去控制,使用原始API,比如start,done。但这样的话,我们其实没有必要去封装
于是我们开始修改代码,使用computed
.这样就实现了与watch相同的效果,同时也吸收了computed
的一些优点。 同时我们也把NProgress
的一些原生API导出出来,用来实现更高的灵活性。
import { ref, computed } from 'vue-demi' import nprogress from 'nprogress' export const useNProgress = (instance,options)=>{ const isLoading = computed({ get:() => nprogress.isStarted() && nprogress.value<1, set:status => status ? nprogress.start() : nprogress.done() }) return { isLoading, start: nprogress.start, done: nprogress.done, } }
但是,有时候我们并不仅使用默认样式或配置,这时候我们需要传入配置。同时,有时候我们可能会自定义nprogress的实例,因此我把第一个参数命名为instance
,第二个参数自然是options
,这里其实无需我们去操心,直接调用相关API即可。
/*省略其他逻辑*/ const progress = ref(instance) if(options){ nprogress.configure(options) }
在NProgress
中有一个比较有趣的APIinc
,我把它解释为步进,就是每次前进一点。我们可以把这个功能封装进去。
import { ref, computed,watchEffect,unref } from 'vue-demi' import nprogress from 'nprogress' export const useNProgress = (instance,options)=>{ const isLoading = computed({ get:() => nprogress.isStarted() && nprogress.value<1, set:status => status ? nprogress.start() : nprogress.done() }) const progress = ref(instance) if(options){ nprogress.configure(options) } watchEffect(()=>{ if(typeof unref(progress) === 'number'){ nprogress.set(progress.value) } }) return { isLoading, progress, step: nprogress.inc, start: nprogress.start, done: nprogress.done, reset()=>progress.value=0 } }
这样,当我们使用的时候,可以像我一开始的时候,直接使用isLoading
,也可以使用step()
实现步进,也可以直接在传入一个number,示例代码如下
const {isLoading,progress,step} = useNProgress(0.1,null) progress.value = 0.2 //进度条加载到0.2 step() //每次自动步进 isLoading.value=false //直接结束加载
这样封装是不是更好使用了呢。而且,由于我并没有把vue-router和这个耦合在一起,因此理论上react也可以使用的。
以上就是Composition API思想封装NProgress示例详解的详细内容,更多关于Composition API封装NProgress的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7129519192897749005
相关文章
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-18
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 在本篇内容里小编给大家分享的是关于c#使用封装方法以及相关知识点,对此有需要的朋友们可以学习下。...2020-06-25
- 这篇文章主要介绍了如何使用 JavaScript 操作浏览器历史记录 API,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...2020-11-24
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
- 这篇文章主要帮助大家理解JavaScript中worker事件api,对worker事件api有一个深刻了解,感兴趣的小伙伴们可以参考一下...2015-12-27
- 这篇文章主要介绍了vue设置全局访问接口API地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-14
- 在日常开发中,总会接触到各种接口,前后端数据传输接口,第三方业务平台接口,下面这篇文章主要给大家介绍了关于如何设计一个安全的API接口的相关资料,需要的朋友可以参考下...2021-08-12
C# Windows API应用之基于GetDesktopWindow获得桌面所有窗口句柄的方法
这篇文章主要介绍了C# Windows API应用之基于GetDesktopWindow获得桌面所有窗口句柄的方法,结合实例形式分析了GetDesktopWindow函数用于获取窗口句柄的具体使用方法与相关注意事项,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了Vue封装全局过滤器Filters的步骤,通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下...2020-09-16
- 这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2020-09-05
- 这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05
- 这篇文章主要介绍了Vue常用API、高级API的相关总结,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-04
- 这篇文章主要介绍了Mybatis返回结果封装map过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 这篇文章主要介绍了uni-app 常用API,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-20
Swift 中如何使用 Option Pattern 改善可选项的 API 设计
这篇文章主要介绍了Swift 中如何使用 Option Pattern 改善可选项的 API 设计,帮助大家更好的进行ios开发,感兴趣的朋友可以了解下...2020-10-23微信小程序 wx.request(object) API详解及实例代码
这篇文章主要介绍了微信小程序 wx.request(object) API详解及实例代码的相关资料,需要的朋友可以参考下...2016-10-02- 这篇文章主要介绍了微信小程序 Image API实例详解的相关资料,需要的朋友可以参考下...2016-10-02