From 540b18a497f811c63f4308ea092ca6ff83c82f7c Mon Sep 17 00:00:00 2001 From: Mjx <798751550@qq.com> Date: Wed, 30 Oct 2024 10:40:26 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E2=9C=A8=20=E6=96=B0=E5=A2=9ELoadi?= =?UTF-8?q?ngPage=20=E5=8A=A0=E8=BD=BD=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/config.mts | 3 + docs/component/loading-page.md | 94 +++++++++++++++++++ src/pages.json | 10 ++ src/pages/index/Index.vue | 4 + src/pages/loadingPage/Index.vue | 86 +++++++++++++++++ .../components/wd-loading-page/types.ts | 39 ++++++++ .../wd-loading-page/wd-loading-page.vue | 58 ++++++++++++ 7 files changed, 294 insertions(+) create mode 100644 docs/component/loading-page.md create mode 100644 src/pages/loadingPage/Index.vue create mode 100644 src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts create mode 100644 src/uni_modules/wot-design-uni/components/wd-loading-page/wd-loading-page.vue diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 306d6e8dd..d12f692ed 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -333,6 +333,9 @@ export default defineConfig({ }, { link: "/component/loading", text: "Loading 加载" + }, { + link: "/component/loading-page", + text: "LoadingPage 加载页" }, { link: "/component/message-box", text: "MessageBox 弹框" diff --git a/docs/component/loading-page.md b/docs/component/loading-page.md new file mode 100644 index 000000000..5db4e983a --- /dev/null +++ b/docs/component/loading-page.md @@ -0,0 +1,94 @@ + + +# Loading-page 加载页 + +## 基本用法 + +基本用法 + +```html + +``` + +```js +const show = ref(false) +``` + +## 自定义背景色 + +通过 `bgColor` 修改背景色。 + +```html + +``` + +```js +const show = ref(false) +``` + +## 自定义图片 + +通过 `loadingImage` 属性修改 loding 图片。 + +```html + +``` + +```js +const show = ref(false) +``` + +## 自定义插槽内容 + +通过 `#default` 自定义 loding 内容。 + +```html + + + +``` + +```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; +} +``` + +## Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------ | ----------------------------------- | ------- | ------ | -------- | -------- | +| fontSize | 字体大小 | string | - | 16px | - | +| color | 字体颜色 | string | - | 18px | - | +| loadingText | 加载时显示的文字 | string | - | 正在加载 | - | +| loading | 是否加载中 | boolean | - | false | - | +| bgColor | 背景颜色 | string | - | #ffffff | - | +| loadingColor | 加载图标颜色 | string | - | #C8C8C8 | - | +| loadingImage | 文字上方用于替换 loading 动画的图片 | string | - | 空字符串 | - | + +## 外部样式类 + +| 类名 | 说明 | 最低版本 | +| ------------ | ---------- | -------- | +| custom-class | 根节点样式 | - | diff --git a/src/pages.json b/src/pages.json index c462c72ad..5dbaec11b 100644 --- a/src/pages.json +++ b/src/pages.json @@ -211,6 +211,16 @@ "navigationBarTitleText": "Loading 加载指示器" } }, + { + "path": "pages/loadingPage/Index", + "name": "loadingPage", + "style": { + "mp-alipay": { + "allowsBounceVertical": "NO" + }, + "navigationBarTitleText": "LoadingPage 加载页" + } + }, { "path": "pages/progress/Index", "name": "progress", diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue index d92c42f38..d6138cc6d 100644 --- a/src/pages/index/Index.vue +++ b/src/pages/index/Index.vue @@ -242,6 +242,10 @@ const list = ref([ id: 'loading', name: 'Loading 加载指示器' }, + { + id: 'loadingPage', + name: 'LoadingPage 加载页' + }, { id: 'messageBox', name: 'MessageBox 弹框' diff --git a/src/pages/loadingPage/Index.vue b/src/pages/loadingPage/Index.vue new file mode 100644 index 000000000..8cc99d1ee --- /dev/null +++ b/src/pages/loadingPage/Index.vue @@ -0,0 +1,86 @@ + + + diff --git a/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts b/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts new file mode 100644 index 000000000..ba7fe13d3 --- /dev/null +++ b/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts @@ -0,0 +1,39 @@ +/* + * @Author: PdxLook + * @Date: 2024-10-30 10:14:34 + * @LastEditTime: 2024-10-30 10:14:34 + * @LastEditors: PdxLook + * @Description: + * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts + * 记得注释 + */ +import type { ExtractPropTypes } from 'vue' +import { baseProps, makeBooleanProp, makeStringProp } from '../common/props' + +export type LoadingType = 'outline' | 'ring' // 提示信息加载状态类型 + +export const loadingPageProps = { + ...baseProps, + // 提示内容 + loadingText: makeStringProp('正在加载'), + + // 是否加载中 + loading: makeBooleanProp(false), + + // 背景颜色 + bgColor: makeStringProp('#ffffff'), + + // 字体颜色 + color: makeStringProp('#C8C8C8'), + + // 字体大小 + fontSize: makeStringProp('16px'), + + // 加载图标颜色 + loadingColor: makeStringProp('#C8C8C8'), + + // 文字上方用于替换loading动画的图片 + loadingImage: makeStringProp('') +} + +export type LoadingPageProps = ExtractPropTypes diff --git a/src/uni_modules/wot-design-uni/components/wd-loading-page/wd-loading-page.vue b/src/uni_modules/wot-design-uni/components/wd-loading-page/wd-loading-page.vue new file mode 100644 index 000000000..00baf6ac2 --- /dev/null +++ b/src/uni_modules/wot-design-uni/components/wd-loading-page/wd-loading-page.vue @@ -0,0 +1,58 @@ + + + + + + From 63a1d0f12ceb21045a0388b2f4fe19d9623b6ba5 Mon Sep 17 00:00:00 2001 From: Mjx <798751550@qq.com> Date: Wed, 30 Oct 2024 10:44:30 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=20loading-pag?= =?UTF-8?q?e=E6=94=AF=E6=8C=81=E7=89=88=E6=9C=AC=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/loading-page.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/component/loading-page.md b/docs/component/loading-page.md index 5db4e983a..110abc286 100644 --- a/docs/component/loading-page.md +++ b/docs/component/loading-page.md @@ -77,15 +77,15 @@ const show = ref(false) ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| ------------ | ----------------------------------- | ------- | ------ | -------- | -------- | -| fontSize | 字体大小 | string | - | 16px | - | -| color | 字体颜色 | string | - | 18px | - | -| loadingText | 加载时显示的文字 | string | - | 正在加载 | - | -| loading | 是否加载中 | boolean | - | false | - | -| bgColor | 背景颜色 | string | - | #ffffff | - | -| loadingColor | 加载图标颜色 | string | - | #C8C8C8 | - | -| loadingImage | 文字上方用于替换 loading 动画的图片 | string | - | 空字符串 | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------ | ----------------------------------- | ------- | ------ | -------- | ---------------- | +| 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$ | ## 外部样式类 From 5fc773c74fa3941a6344b12843b62b91d167c961 Mon Sep 17 00:00:00 2001 From: Mjx <798751550@qq.com> Date: Wed, 30 Oct 2024 10:49:29 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/wd-loading-page/types.ts | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts b/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts index ba7fe13d3..2c81e0446 100644 --- a/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts @@ -1,38 +1,42 @@ /* * @Author: PdxLook * @Date: 2024-10-30 10:14:34 - * @LastEditTime: 2024-10-30 10:14:34 + * @LastEditTime: 2024-10-30 10:48:34 * @LastEditors: PdxLook - * @Description: + * @Description: 定义了加载页面组件的 props 属性及其类型，用于控制加载页面的显示内容和样式。 * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts - * 记得注释 */ + import type { ExtractPropTypes } from 'vue' import { baseProps, makeBooleanProp, makeStringProp } from '../common/props' -export type LoadingType = 'outline' | 'ring' // 提示信息加载状态类型 - +/** + * 定义加载页面组件的属性，包括文本内容、颜色和加载状态等。 + * 可通过传递不同的 props 值来自定义组件的显示效果。 + */ 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动画的图片 + // 文字上方用于替换loading动画的图片：路径默认为空字符串；如有值，替换默认的加载动画 loadingImage: makeStringProp('') }