Skip to content

Commit 6807a6a

Browse files
yinLiangDreamyinLiangDream
committed
feat: Loading 组件文档更新
feat: 0.6.10 版本更新
1 parent 2f8eb00 commit 6807a6a

File tree

8 files changed

+177
-34
lines changed

8 files changed

+177
-34
lines changed

Diff for: ‎.idea/workspace.xml

+21-18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/.vuepress/public/dataKeyMap.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,8 @@
9999
{ "key": "bar", "value": "进度条加载" },
100100
{ "key": "line", "value": "行内加载" },
101101
{ "key": "modal", "value": "模态框加载" },
102-
{ "key": "image", "value": "图片加载" }
102+
{ "key": "image", "value": "图片加载" },
103+
{ "key": "common", "value": "通用加载" }
103104
],
104105
"menuList": [
105106
{ "key": "type", "value": "类型" },

Diff for: ‎docs/.vuepress/public/loading-bar.md

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,27 @@
1-
21
```jsx
2+
const [barLoading, setBarLoading] = useState(false);
3+
const [barContentLoading, setBarContentLoading] = useState(false);
4+
5+
<ClLoading type="bar" content show={barContentLoading}>
6+
<ClCard>
7+
<ClSwitch
8+
title="bar加载"
9+
type="form"
10+
checked={barLoading}
11+
onChange={flag => {
12+
setBarLoading(flag);
13+
}}
14+
/>
15+
<ClSwitch
16+
title="bar区域加载"
17+
type="form"
18+
checked={barContentLoading}
19+
onChange={flag => {
20+
setBarContentLoading(flag);
21+
}}
22+
/>
23+
</ClCard>
24+
</ClLoading>
25+
326
<ClLoading type='bar' show={barLoading} />
427
```

Diff for: ‎docs/.vuepress/public/loading-common.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
```jsx
2+
const [commonLoading, setCommonLoading] = useState(false);
3+
const [commonContentLoading, setCommonContentLoading] = useState(false);
4+
5+
<ClLoading
6+
type="common"
7+
show={commonContentLoading}
8+
commonText="加载 3 秒"
9+
content
10+
>
11+
<ClCard>
12+
<ClSwitch
13+
title="common加载"
14+
type="form"
15+
checked={commonLoading}
16+
onChange={flag => {
17+
setCommonLoading(flag);
18+
setTimeout(() => {
19+
setCommonLoading(false);
20+
}, 3000);
21+
}}
22+
/>
23+
<ClSwitch
24+
title="common区域加载"
25+
type="form"
26+
checked={commonContentLoading}
27+
onChange={flag => {
28+
setCommonContentLoading(flag);
29+
setTimeout(() => {
30+
setCommonContentLoading(false);
31+
}, 3000);
32+
}}
33+
/>
34+
</ClCard>
35+
</ClLoading>
36+
37+
<ClLoading type="common" show={commonLoading} commonText="加载 3 秒" />
38+
```

Diff for: ‎docs/.vuepress/public/loading-image.md

+36-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,42 @@
1-
21
```jsx
2+
const [imageLoading, setImageLoading] = useState(false);
3+
const [imageContentLoading, setImageContentLoading] = useState(false);
4+
5+
<ClLoading
6+
content
7+
type="image"
8+
show={imageContentLoading}
9+
imgUrl="https://mp-yys-1255362963.cos.ap-chengdu.myqcloud.com/loading.gif"
10+
>
11+
<ClCard>
12+
<ClSwitch
13+
title="image加载"
14+
type="form"
15+
checked={imageLoading}
16+
onChange={flag => {
17+
setImageLoading(flag);
18+
setTimeout(() => {
19+
setImageLoading(false);
20+
}, 3000);
21+
}}
22+
/>
23+
<ClSwitch
24+
title="image区域加载"
25+
type="form"
26+
checked={imageContentLoading}
27+
onChange={flag => {
28+
setImageContentLoading(flag);
29+
setTimeout(() => {
30+
setImageContentLoading(false);
31+
}, 3000);
32+
}}
33+
/>
34+
</ClCard>
35+
</ClLoading>
36+
337
<ClLoading
438
type="image"
539
show={imageLoading}
640
imgUrl="https://mp-yys-1255362963.cos.ap-chengdu.myqcloud.com/loading.gif"
7-
/>
41+
/>;
842
```

Diff for: ‎docs/.vuepress/public/loading-line.md

+44-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,51 @@
1-
21
```jsx
2+
const [lineLoading, setLineLoading] = useState(false);
3+
const [lineLoadingErr, setLineLoadingErr] = useState(false);
4+
const [lineLoadingEnd, setLineLoadingEnd] = useState(false);
5+
6+
<ClCard>
7+
<ClSwitch
8+
title="line加载"
9+
type="form"
10+
checked={lineLoading}
11+
onChange={flag => {
12+
setLineLoading(flag);
13+
if (!flag) {
14+
setLineLoadingErr(false);
15+
setLineLoadingEnd(false);
16+
}
17+
}}
18+
/>
19+
<ClSwitch
20+
title="line加载出错"
21+
type="form"
22+
checked={lineLoadingErr}
23+
onChange={flag => {
24+
if (flag) {
25+
setLineLoadingEnd(false);
26+
setLineLoading(true);
27+
}
28+
setLineLoadingErr(flag);
29+
}}
30+
/>
31+
<ClSwitch
32+
title="line加载没有更多了"
33+
type="form"
34+
checked={lineLoadingEnd}
35+
onChange={flag => {
36+
if (flag) {
37+
setLineLoadingErr(false);
38+
setLineLoading(true);
39+
}
40+
setLineLoadingEnd(flag);
41+
}}
42+
/>
43+
</ClCard>
44+
345
<ClLoading
446
type="line"
547
show={lineLoading}
648
loadingError={lineLoadingErr}
749
noMore={lineLoadingEnd}
8-
/>
50+
/>;
951
```

Diff for: ‎docs/action/loading.md

+11-9
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,16 @@ import { ClLoading } from "mp-colorui";
1313

1414
### Loading 参数
1515

16-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
17-
| ------------ | ------------------------------------- | ------- | --------------------------------------------- | --------- |
18-
| type | _loading 类型_ | string | _`bar`_,_`modal`_,_`bar`_,_`line`_ | _`bar`_ |
19-
| bgColor | _背景色_ | string | 参考文档 [默认色](/mp-colorui-doc/home/color) | _`blue`_ |
20-
| modalText | _type 为 modal 时显示的文字_ | string | - | - |
21-
| imgUrl | _type 为 modal 或 image 时显示的图片_ | string | - | - |
22-
| show | _是否显示_ | boolean | _`true`_,_`false`_ | _`false`_ |
23-
| loadingError | _type 为 line 时设置，加载失败_ | boolean | _`true`_,_`false`_ | _`false`_ |
24-
| noMore | _type 为 line 时设置，没有更多了_ | boolean | _`true`_,_`false`_ | _`false`_ |
16+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
17+
| ------------ | ------------------------------------------------------ | ------- | --------------------------------------------- | --------- |
18+
| type | _loading 类型_ | string | _`bar`_,_`modal`_,_`bar`_,_`line`_,_`common`_ | _`bar`_ |
19+
| bgColor | _背景色_ | string | 参考文档 [默认色](/mp-colorui-doc/home/color) | _`blue`_ |
20+
| modalText | _type 为 modal 时显示的文字_ | string | - | - |
21+
| commonText | _type 为 common 时显示的文字_ | string | - | - |
22+
| imgUrl | _type 为 modal 或 image 时显示的图片_ | string | - | - |
23+
| show | _是否显示_ | boolean | _`true`_,_`false`_ | _`false`_ |
24+
| loadingError | _type 为 line 时设置，加载失败_ | boolean | _`true`_,_`false`_ | _`false`_ |
25+
| noMore | _type 为 line 时设置，没有更多了_ | boolean | _`true`_,_`false`_ | _`false`_ |
26+
| content | _是否是区域加载（仅在 common、image、bar 模式下生效）_ | boolean | - | _`false`_ |
2527

2628
<FloatPhone url="https://yinliangdream.github.io/mp-colorui-h5-demo/#/package/actionPackage/loading/index" />

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mp-colorui",
3-
"version": "0.6.9",
3+
"version": "0.6.10",
44
"description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）",
55
"keywords": [
66
"taro",

0 commit comments

Comments
 (0)