useNProgress.ts 764 B

12345678910111213141516171819202122232425262728293031323334
  1. import { nextTick, unref } from 'vue'
  2. import type { NProgressOptions } from 'nprogress'
  3. import NProgress from 'nprogress'
  4. import 'nprogress/nprogress.css'
  5. import { useCssVar } from '@vueuse/core'
  6. const primaryColor = useCssVar('--el-color-primary', document.documentElement)
  7. export const useNProgress = () => {
  8. NProgress.configure({ showSpinner: false } as NProgressOptions)
  9. const initColor = async () => {
  10. await nextTick()
  11. const bar = document.getElementById('nprogress')?.getElementsByClassName('bar')[0] as ElRef
  12. if (bar) {
  13. bar.style.background = unref(primaryColor.value)
  14. }
  15. }
  16. initColor()
  17. const start = () => {
  18. NProgress.start()
  19. }
  20. const done = () => {
  21. NProgress.done()
  22. }
  23. return {
  24. start,
  25. done
  26. }
  27. }