Loading bar: use <CwaLoadingIndicator> in app.vue (cwa-nuxt-module#396)

已关闭 适合新手
#234 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
70/100
Issue 类型
文档
描述清晰度
描述清楚
活跃度
活跃
技术栈
nuxtjs

调研方向

从文档中展示加载条的页面开始,即 app.vue 以及布局示例中出现 CwaUiProgressBar 的地方。将布局示例替换为放在 <NuxtLayout> 上方的 <CwaLoadingIndicator>,并注明它包裹了 <NuxtLoadingIndicator> 并接受其属性。补充一段简短说明,介绍 page:loading:end 的触发时机,以及 definePageMeta({ cwa: { disabled: true } })。当示例以及属性和钩子的说明与 issue 描述一致时,即视为完成。

由索引模型根据 Issue 内容生成。

描述

documentation

cwa-nuxt-module#396 (1ed92548, unreleased after 2.0.0-alpha.15).

  • <CwaLoadingIndicator> is the recommended loading bar: put it in app.vue above <NuxtLayout>. It wraps <NuxtLoadingIndicator> and takes its props (color, height, throttle, duration, …); on CWA pages it shows the real page load percentage.
  • CwaUiProgressBar in a layout is now optional; the template drops it.
  • Nuxt's page:loading:end (and so the loading bar finishing and the scroll to top) now waits for the new CWA page to show. Pages with definePageMeta({ cwa: { disabled: true } }) are never held. Anything an app hooks on page:loading:end runs when the new page is on screen.
主要语言
TypeScript
星标
0
派生
0
平均合并
1 小时 20 分钟
30 天内合并 PR
1

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南,环境需要你自己搭建:先看它的 README,通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

components-web-app/docs 的其他 Issue

查看 components-web-app/docs 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。