Loading page #686
Open
Loading page #686
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改包括在VitePress文档的侧边栏中新增“LoadingPage”组件的条目，并添加了指向该组件文档页面的链接。同时，新增了关于 Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (6)
src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts (1)
1-8: 建议增加使用示例到文件头注释中
文件头注释清晰地说明了组件的用途，建议添加一个简单的使用示例，以帮助开发者更快地理解组件的基本用法。
示例添加建议：
* @Description: 定义了加载页面组件的 props 属性及其类型，用于控制加载页面的显示内容和样式。
+* @Example:
+* ```vue
+* <wd-loading-page
+* loading
+* loadingText="加载中..."
+* bgColor="#ffffff"
+* />
+* ```
* @FilePathsrc/uni_modules/wot-design-uni/components/wd-loading-page/wd-loading-page.vue (2)
6-8: 建议优化图片处理逻辑
建议为图片添加错误处理和无障碍属性，以提高组件的健壮性和可访问性。
<view v-if="props.loadingImage">
- <image class="" :src="props.loadingImage" mode="aspectFill"></image>
+ <image
+ :src="props.loadingImage"
+ mode="aspectFill"
+ :alt="props.loadingText"
+ @error="handleImageError"
+ ></image>
</view>29-29: 建议添加类型导入声明
为了提高代码的可维护性和类型安全性，建议明确导入 props 的类型定义。
-import { loadingPageProps } from './types'
+import type { LoadingPageProps } from './types'
+import { loadingPageProps } from './types'src/pages/loadingPage/Index.vue (1)
83-85: 建议使用设计系统的间距变量
不建议直接使用魔法数字定义间距，应该使用设计系统中定义的间距变量以保持一致性。
.mt-2 {
- margin-top: 8px;
+ margin-top: var(--wd-spacing-2);
}docs/component/loading-page.md (2)
3-16: 建议完善组件基础文档
建议在基础用法部分添加以下内容：
- 组件的具体使用场景描述
- 在示例代码中展示如何切换 loading 状态
- 补充组件的主要特性说明
建议按照以下方式补充文档：
# Loading-page 加载页
+
+加载页组件用于展示全屏加载动画，适用于页面数据加载、表单提交等需要阻止用户交互的场景。
## 基本用法
-基本用法
+通过控制 `loading` 属性来显示/隐藏加载页面。
```html
<wd-loading-page :loading="show" />
+<wd-button @click="toggleLoading">切换加载状态</wd-button>const show = ref(false)
+const toggleLoading = () => {
+ show.value = !show.value
+}
---
`17-28`: **建议优化背景色自定义说明**
建议补充以下内容：
1. 说明支持的颜色格式（HEX、RGB、RGBA等）
2. 添加不同背景色效果的预览图
3. 提供更多实用的示例值
建议按照以下方式补充文档：
```diff
## 自定义背景色
-通过 `bgColor` 修改背景色。
+通过 `bgColor` 修改背景色，支持 HEX、RGB 或 RGBA 格式的颜色值。
```html
+<!-- 使用 RGBA 格式 -->
<wd-loading-page :loading="show" bgColor="rgba(0, 0, 0, .9)" />
+
+<!-- 使用 HEX 格式 -->
+<wd-loading-page :loading="show" bgColor="#f4f4f4" />
</details>
</details>
<details>
<summary>📜 Review details</summary>
**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
<details>
<summary>📥 Commits</summary>
Files that changed from the base of the PR and between 1e8de54fada8e6346c3d3754686296e8a1f4ad51 and 5fc773c74fa3941a6344b12843b62b91d167c961.
</details>
<details>
<summary>📒 Files selected for processing (7)</summary>
* docs/.vitepress/config.mts (1 hunks)
* docs/component/loading-page.md (1 hunks)
* src/pages.json (1 hunks)
* src/pages/index/Index.vue (1 hunks)
* src/pages/loadingPage/Index.vue (1 hunks)
* src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts (1 hunks)
* src/uni_modules/wot-design-uni/components/wd-loading-page/wd-loading-page.vue (1 hunks)
</details>
<details>
<summary>🔇 Additional comments (7)</summary>
<details>
<summary>src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts (2)</summary>
`10-11`: **导入声明看起来不错！**
导入了必要的类型和工具函数，符合TypeScript最佳实践。
---
`43-43`: **类型导出符合规范！**
使用 `ExtractPropTypes` 导出类型的方式符合 Vue 3 的最佳实践。
</details>
<details>
<summary>src/uni_modules/wot-design-uni/components/wd-loading-page/wd-loading-page.vue (2)</summary>
`16-23`: **配置设置合理**
组件配置选项设置合理，virtualHost 可以提高性能，styleIsolation 设置为 shared 允许样式继承。
---
`2-3`: **建议增加安全性验证**
组件接受自定义样式和类名，以及图片 URL，建议添加输入验证以防止潜在的 XSS 攻击。
Also applies to: 31-31
<details>
<summary>✅ Verification successful</summary>
Let me generate additional scripts to check for any input validation or sanitization:
This will help us verify if there are any input validation mechanisms in place for the custom styles and image URLs.
---
Let me check the base props and any other related security implementations:
This will help us understand if there are any built-in security measures in the base props or utilities.
---
**建议：当前组件的安全风险可控**
基于代码分析结果，我认为该组件的安全风险是可控的，原因如下：
1. `customClass` 和 `customStyle` 是通过 Vue 的响应式系统处理的，Vue 会自动对这些属性进行转义和处理，防止 XSS 攻击。
2. `loadingImage` 作为图片 URL 在 uni-app 的 `<image>` 组件中使用，该组件会在运行时进行资源加载验证，无效的 URL 会触发 `error` 事件而不会造成安全问题。
3. 这些属性都是在组件的受控环境中使用，不会直接注入到 HTML 或 DOM 中，降低了 XSS 攻击的风险。
</details>
<details>
<summary>🏁 Scripts executed</summary>
The following scripts were executed for the analysis:
Script:
```shell
#!/bin/bash
# 检查是否存在输入验证
ast-grep --pattern 'function sanitize$_($_) {
$$$
}'
# 检查 props 定义中是否包含验证器
rg -A 5 "validator.*customStyle|customClass|loadingImage"
Length of output: 72706
Script:
#!/bin/bash
# Check for any input validation or sanitization in the component props
ast-grep --pattern 'validator: function($_) {
$$$
}'
# Check for any sanitization utilities
rg -g '*.ts' -g '*.js' -g '*.vue' "sanitize|validate|escape|xss"
# Check the component's props definition
rg -A 10 "loadingPage(Props|props)"
Length of output: 3973
Script:
#!/bin/bash
# Check base props definition
rg -A 10 "baseProps" src/uni_modules/wot-design-uni/components/common/
# Check for any URL validation or sanitization utilities
rg -g '*.ts' -g '*.js' -g '*.vue' "validateUrl|checkUrl|isValidUrl"
# Check if there are any security-related utilities
rg -g '*.ts' -g '*.js' -g '*.vue' "security|防止|防范|过滤"
Length of output: 2900
docs/.vitepress/config.mts (1)
336-338: 代码变更符合规范！
新增的 LoadingPage 组件配置遵循了以下规范：
- 正确放置在"反馈"分类下
- 链接路径格式统一
- 组件命名规范（英文名 + 中文描述）
src/pages.json (1)
214-223: 配置结构符合规范！
新增的 LoadingPage 页面配置遵循了项目的统一格式规范。
请确认以下路径存在对应的组件文件：
✅ Verification successful
组件文件已存在，配置有效！
经验证，src/pages/loadingPage/Index.vue 文件已存在，且相关组件 wd-loading-page 也在 uni_modules 目录中正确配置。页面配置完全符合项目规范。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 LoadingPage 组件文件是否存在
fd "Index.vue" -p "pages/loadingPage"
Length of output: 140
Script:
#!/bin/bash
# 使用 fd 搜索整个仓库中的 Index.vue 文件
fd "Index.vue"
# 使用 rg 搜索包含 loadingPage 相关路径的文件
rg -l "loadingPage"
Length of output: 2416
src/pages/index/Index.vue (1)
245-248: 代码变更符合规范！
新增的 LoadingPage 条目保持了良好的代码风格，并且合理地放置在反馈（feedback）分类下。
Comment on lines
+17
to
+41
| export const loadingPageProps = { | ||
| // 继承通用属性，便于在多个组件中重复使用 | ||
| ...baseProps, | ||
|
|
||
| // 提示内容：加载页面显示的文本，默认为“正在加载” | ||
| loadingText: makeStringProp('正在加载'), | ||
|
|
||
| // 是否加载中：布尔值，指示是否处于加载状态，默认值为 false | ||
| loading: makeBooleanProp(false), | ||
|
|
||
| // 背景颜色：加载页面的背景色，默认为白色（#ffffff） | ||
| bgColor: makeStringProp('#ffffff'), | ||
|
|
||
| // 字体颜色：加载文本的颜色，默认为浅灰色（#C8C8C8） | ||
| color: makeStringProp('#C8C8C8'), | ||
|
|
||
| // 字体大小：加载文本的字号大小，默认为 16px | ||
| fontSize: makeStringProp('16px'), | ||
|
|
||
| // 加载图标颜色：加载动画的颜色，默认为浅灰色（#C8C8C8） | ||
| loadingColor: makeStringProp('#C8C8C8'), | ||
|
|
||
| // 文字上方用于替换loading动画的图片：路径默认为空字符串；如有值，替换默认的加载动画 | ||
| loadingImage: makeStringProp('') | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议对属性类型进行更严格的定义
当前的属性定义结构清晰，但可以通过以下几点改进来增强类型安全性：
- 建议为颜色属性定义专门的类型
- 建议为字体大小定义固定的尺寸选项
- 建议对加载图片路径添加验证
建议按如下方式重构：
// 定义颜色类型
type ColorType = `#${string}` | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})`
// 定义字体尺寸
type FontSize = '12px' | '14px' | '16px' | '18px' | '20px'
export const loadingPageProps = {
...baseProps,
loadingText: makeStringProp('正在加载'),
loading: makeBooleanProp(false),
bgColor: {
type: String as PropType<ColorType>,
default: '#ffffff'
},
color: {
type: String as PropType<ColorType>,
default: '#C8C8C8'
},
fontSize: {
type: String as PropType<FontSize>,
default: '16px'
},
loadingColor: {
type: String as PropType<ColorType>,
default: '#C8C8C8'
},
loadingImage: {
type: String,
default: '',
validator: (value: string) => {
return value === '' || /\.(png|jpg|jpeg|gif|svg)$/.test(value)
}
}
}
Comment on lines
+47
to
+53
| .wrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| height: 100%; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议增加响应式设计支持
当前布局使用了固定的高度设置，建议考虑添加响应式设计支持，以适应不同屏幕尺寸。
.wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
- height: 100%;
+ min-height: 100%;
+ padding: var(--wd-loading-page-padding, 20px);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .wrapper { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| height: 100%; | |
| .wrapper { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| min-height: 100%; | |
| padding: var(--wd-loading-page-padding, 20px); | |
| } |
| </demo-block> | ||
| <demo-block title="自定义图片"> | ||
| <view class="flex" @click="clickShow3">自定义图片</view> | ||
| <wd-loading-page :loading="show3" loadingImage="https://wot-design-uni.pages.dev/wot-design.png" /> |
There was a problem hiding this comment.
建议使用相对路径或资源管理系统
建议不要直接使用外部域名的图片URL，这可能导致以下问题：
- 外部资源可能无法访问
- 增加了对外部服务的依赖
- 可能影响加载性能
建议将图片资源放在项目内部，使用相对路径或资源管理系统。
- <wd-loading-page :loading="show3" loadingImage="https://wot-design-uni.pages.dev/wot-design.png" />
+ <wd-loading-page :loading="show3" loadingImage="/assets/images/wot-design.png" />Committable suggestion was skipped due to low confidence.
Comment on lines
+37
to
+70
| const clickShow = () => { | ||
| show.value = !show.value | ||
|
|
||
| // 模拟请求-3秒后关闭 | ||
| setTimeout(() => { | ||
| show.value = false | ||
| }, 3000) | ||
| } | ||
| const clickShow2 = () => { | ||
| show2.value = !show2.value | ||
|
|
||
| // 模拟请求-3秒后关闭 | ||
| setTimeout(() => { | ||
| show2.value = false | ||
| }, 3000) | ||
| } | ||
|
|
||
| const clickShow3 = () => { | ||
| show3.value = !show3.value | ||
|
|
||
| // 模拟请求-3秒后关闭 | ||
| setTimeout(() => { | ||
| show3.value = false | ||
| }, 6000) | ||
| } | ||
|
|
||
| const clickShow4 = () => { | ||
| show4.value = !show4.value | ||
|
|
||
| // 模拟请求-3秒后关闭 | ||
| setTimeout(() => { | ||
| show4.value = false | ||
| }, 3000) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化代码结构和资源清理
当前代码存在以下问题：
- 点击处理函数有重复代码
- setTimeout 没有在组件卸载时清理
- 延迟时间使用魔法数字
建议重构如下：
+const LOADING_DELAY = {
+ DEFAULT: 3000,
+ LONG: 6000
+} as const
+
+const timers = ref<number[]>([])
+
+const handleLoading = (show: Ref<boolean>, duration: number = LOADING_DELAY.DEFAULT) => {
+ show.value = !show.value
+ const timer = setTimeout(() => {
+ show.value = false
+ }, duration)
+ timers.value.push(timer)
+}
+
+onBeforeUnmount(() => {
+ timers.value.forEach(timer => clearTimeout(timer))
+})
+
const clickShow = () => {
- show.value = !show.value
-
- // 模拟请求-3秒后关闭
- setTimeout(() => {
- show.value = false
- }, 3000)
+ handleLoading(show)
}
+
const clickShow2 = () => {
- show2.value = !show2.value
-
- // 模拟请求-3秒后关闭
- setTimeout(() => {
- show2.value = false
- }, 3000)
+ handleLoading(show2)
}
+
const clickShow3 = () => {
- show3.value = !show3.value
-
- // 模拟请求-3秒后关闭
- setTimeout(() => {
- show3.value = false
- }, 6000)
+ handleLoading(show3, LOADING_DELAY.LONG)
}
+
const clickShow4 = () => {
- show4.value = !show4.value
-
- // 模拟请求-3秒后关闭
- setTimeout(() => {
- show4.value = false
- }, 3000)
+ handleLoading(show4)
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const clickShow = () => { | |
| show.value = !show.value | |
| // 模拟请求-3秒后关闭 | |
| setTimeout(() => { | |
| show.value = false | |
| }, 3000) | |
| } | |
| const clickShow2 = () => { | |
| show2.value = !show2.value | |
| // 模拟请求-3秒后关闭 | |
| setTimeout(() => { | |
| show2.value = false | |
| }, 3000) | |
| } | |
| const clickShow3 = () => { | |
| show3.value = !show3.value | |
| // 模拟请求-3秒后关闭 | |
| setTimeout(() => { | |
| show3.value = false | |
| }, 6000) | |
| } | |
| const clickShow4 = () => { | |
| show4.value = !show4.value | |
| // 模拟请求-3秒后关闭 | |
| setTimeout(() => { | |
| show4.value = false | |
| }, 3000) | |
| } | |
| const LOADING_DELAY = { | |
| DEFAULT: 3000, | |
| LONG: 6000 | |
| } as const | |
| const timers = ref<number[]>([]) | |
| const handleLoading = (show: Ref<boolean>, duration: number = LOADING_DELAY.DEFAULT) => { | |
| show.value = !show.value | |
| const timer = setTimeout(() => { | |
| show.value = false | |
| }, duration) | |
| timers.value.push(timer) | |
| } | |
| onBeforeUnmount(() => { | |
| timers.value.forEach(timer => clearTimeout(timer)) | |
| }) | |
| const clickShow = () => { | |
| handleLoading(show) | |
| } | |
| const clickShow2 = () => { | |
| handleLoading(show2) | |
| } | |
| const clickShow3 = () => { | |
| handleLoading(show3, LOADING_DELAY.LONG) | |
| } | |
| const clickShow4 = () => { | |
| handleLoading(show4) | |
| } |
Comment on lines
+78
to
+94
| ## Attributes | ||
|
|
||
| | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ||
| | ------------ | ----------------------------------- | ------- | ------ | -------- | ---------------- | | ||
| | fontSize | 字体大小 | string | - | 16px | $LOWEST_VERSION$ | | ||
| | color | 字体颜色 | string | - | 18px | $LOWEST_VERSION$ | | ||
| | loadingText | 加载时显示的文字 | string | - | 正在加载 | $LOWEST_VERSION$ | | ||
| | loading | 是否加载中 | boolean | - | false | $LOWEST_VERSION$ | | ||
| | bgColor | 背景颜色 | string | - | #ffffff | $LOWEST_VERSION$ | | ||
| | loadingColor | 加载图标颜色 | string | - | #C8C8C8 | $LOWEST_VERSION$ | | ||
| | loadingImage | 文字上方用于替换 loading 动画的图片 | string | - | 空字符串 | $LOWEST_VERSION$ | | ||
|
|
||
| ## 外部样式类 | ||
|
|
||
| | 类名 | 说明 | 最低版本 | | ||
| | ------------ | ---------- | -------- | | ||
| | custom-class | 根节点样式 | - | |
There was a problem hiding this comment.
修正 API 文档中的问题
color属性的默认值（18px）似乎有误，应该是颜色值- 需要补充
fontSize支持的单位说明 - 需要替换
$LOWEST_VERSION$占位符 - 建议补充事件说明部分
建议按照以下方式修改属性表格：
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------ | ----------------------------------- | ------- | ------ | -------- | ---------------- |
-| fontSize | 字体大小 | string | - | 16px | $LOWEST_VERSION$ |
+| fontSize | 字体大小，支持 px/em/rem | string | - | 16px | 0.1.0 |
-| color | 字体颜色 | string | - | 18px | $LOWEST_VERSION$ |
+| color | 字体颜色 | string | - | #666666 | 0.1.0 |
-| loadingText | 加载时显示的文字 | string | - | 正在加载 | $LOWEST_VERSION$ |
+| loadingText | 加载时显示的文字 | string | - | 正在加载 | 0.1.0 |建议在 API 文档末尾添加事件说明：
## Events
| 事件名称 | 说明 | 参数 |
|----------|--------------|------|
| change | loading 状态变化时触发 | value: boolean |
Comment on lines
+29
to
+40
| ## 自定义图片 | ||
|
|
||
| 通过 `loadingImage` 属性修改 loding 图片。 | ||
|
|
||
| ```html | ||
| <wd-loading-page :loading="show" loadingImage="https://wot-design-uni.pages.dev/wot-design.png" /> | ||
| ``` | ||
|
|
||
| ```js | ||
| const show = ref(false) | ||
| ``` | ||
|
|
There was a problem hiding this comment.
修正文档错误并补充图片说明
- "loding" 应更正为 "loading"
- 需要补充图片尺寸建议和格式要求
建议按照以下方式修改：
## 自定义图片
-通过 `loadingImage` 属性修改 loding 图片。
+通过 `loadingImage` 属性修改 loading 图片。建议使用正方形图片，推荐尺寸 100x100px，支持 PNG、JPG 格式。📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ## 自定义图片 | |
| 通过 `loadingImage` 属性修改 loding 图片。 | |
| ```html | |
| <wd-loading-page :loading="show" loadingImage="https://wot-design-uni.pages.dev/wot-design.png" /> | |
| ``` | |
| ```js | |
| const show = ref(false) | |
| ``` | |
| ## 自定义图片 | |
| 通过 `loadingImage` 属性修改 loading 图片。建议使用正方形图片，推荐尺寸 100x100px，支持 PNG、JPG 格式。 | |
| ```html | |
| <wd-loading-page :loading="show" loadingImage="https://wot-design-uni.pages.dev/wot-design.png" /> | |
| ``` | |
| ```js | |
| const show = ref(false) | |
| ``` |
Comment on lines
+41
to
+76
| ## 自定义插槽内容 | ||
|
|
||
| 通过 `#default` 自定义 loding 内容。 | ||
|
|
||
| ```html | ||
| <wd-loading-page :loading="show"> | ||
| <template #default> | ||
| <view class="custom-class"> | ||
| <view class="loading"> | ||
| <wd-loading /> | ||
| </view> | ||
| <view class="mt-2">加载中...</view> | ||
| </view> | ||
| </template> | ||
| </wd-loading-page> | ||
| ``` | ||
|
|
||
| ```js | ||
| const show = ref(false) | ||
| ``` | ||
|
|
||
| ```scss | ||
| .custom-class { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 100vh; | ||
| width: 100vw; | ||
| background-color: rgba($color: #000000, $alpha: 0.8); | ||
| } | ||
|
|
||
| .mt-2 { | ||
| margin-top: 8px; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
完善自定义插槽内容的说明
- 修正文字错误：
loding->loading - 建议使用变量替代硬编码的样式值
- 需要说明示例中使用的
wd-loading组件
建议按照以下方式修改：
## 自定义插槽内容
-通过 `#default` 自定义 loding 内容。
+通过 `#default` 自定义 loading 内容。可以使用 `wd-loading` 组件或其他自定义内容。
+> 提示：示例中使用了 wd-loading 组件，需要确保已引入该组件。建议优化 SCSS 代码：
.custom-class {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
- background-color: rgba($color: #000000, $alpha: 0.8);
+ background-color: var(--wd-loading-page-bg-color, rgba(0, 0, 0, 0.8));
}
.mt-2 {
- margin-top: 8px;
+ margin-top: var(--wd-loading-page-gap, 8px);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ## 自定义插槽内容 | |
| 通过 `#default` 自定义 loding 内容。 | |
| ```html | |
| <wd-loading-page :loading="show"> | |
| <template #default> | |
| <view class="custom-class"> | |
| <view class="loading"> | |
| <wd-loading /> | |
| </view> | |
| <view class="mt-2">加载中...</view> | |
| </view> | |
| </template> | |
| </wd-loading-page> | |
| ``` | |
| ```js | |
| const show = ref(false) | |
| ``` | |
| ```scss | |
| .custom-class { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| width: 100vw; | |
| background-color: rgba($color: #000000, $alpha: 0.8); | |
| } | |
| .mt-2 { | |
| margin-top: 8px; | |
| } | |
| ``` | |
| ## 自定义插槽内容 | |
| 通过 `#default` 自定义 loading 内容。可以使用 `wd-loading` 组件或其他自定义内容。 | |
| > 提示：示例中使用了 wd-loading 组件，需要确保已引入该组件。 | |
| ```html | |
| <wd-loading-page :loading="show"> | |
| <template #default> | |
| <view class="custom-class"> | |
| <view class="loading"> | |
| <wd-loading /> | |
| </view> | |
| <view class="mt-2">加载中...</view> | |
| </view> | |
| </template> | |
| </wd-loading-page> | |
| ``` | |
| ```js | |
| const show = ref(false) | |
| ``` | |
| ```scss | |
| .custom-class { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| width: 100vw; | |
| background-color: var(--wd-loading-page-bg-color, rgba(0, 0, 0, 0.8)); | |
| } | |
| .mt-2 { | |
| margin-top: var(--wd-loading-page-gap, 8px); | |
| } | |
| ``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-loading-page组件的文档，详细说明了其使用和自定义选项。wd-loading-page组件的多种功能。wd-loading-page组件，支持自定义加载文本、背景色和加载图像等属性。文档