Skip to content

Commit f54ff30

Browse files
MoonofweishengMoonofweisheng
committed
feat: ✨ 迁移StatusTip组件的图片资源
1 parent f8a5240 commit f54ff30

File tree

4 files changed

+34
-36
lines changed

4 files changed

+34
-36
lines changed

‎docs/component/status-tip.md‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,18 @@
44

55
一般用于兜底占位展示。
66

7-
> 本组件使用图片均为外链，推荐将图片下载到开发者的服务器后通过自定义图片`URL`使用。
7+
::: warning 注意
8+
本组件使用图片均为外链，**_不保证稳定性_**，推荐将图片下载到开发者的服务器后通过自定义图片`URL`或者自定义`url-prefix`使用。1.3.11版本开始支持自定义图片地址前缀`url-prefix`。
9+
10+
下载地址：
11+
12+
1. Github 仓库：[https://github.com/Moonofweisheng/wot-design-uni-assets](https://github.com/Moonofweisheng/wot-design-uni-assets)
13+
2. npm 地址：
14+
15+
- npm：[https://www.npmjs.com/package/wot-design-uni-assets](https://www.npmjs.com/package/wot-design-uni-assets)
16+
- 淘宝镜像：[https://npmmirror.com/package/wot-design-uni-assets](https://npmmirror.com/package/wot-design-uni-assets)
17+
18+
:::
819

920
## 基本用法
1021

@@ -40,17 +51,18 @@
4051
需要自定义图片时，可以在 `image` 属性中传入任意图片 URL。
4152

4253
```html
43-
<wd-status-tip image="https://img.wot-design-uni.cn/static/1.jpg" tip="查看我的头像" />
54+
<wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="查看我的头像" />
4455
```
4556

4657
## Attributes
4758

48-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
49-
| ---------- | ------------------------------ | ----------------------------- | --------------------------------------------------------------- | --------- | -------- |
50-
| image | 缺省图片类型，支持传入图片 URL | string | search / network / content / collect / comment / halo / message | network | - |
51-
| image-size | 图片大小，默认单位为 `px` | `string`/`number`/`ImageSize` | - | - | - |
52-
| tip | 提示文案 | string | - | - | - |
53-
| image-mode | 预览图片的 mode 属性 | `ImageMode` | - | aspectFit | 1.2.12 |
59+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
60+
| ---------- | -------------------------------------------------- | ----------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------- | ---------------- |
61+
| image | 缺省图片类型，支持传入图片 URL | string | search / network / content / collect / comment / halo / message | network | - |
62+
| image-size | 图片大小，默认单位为 `px` | `string`/`number`/`ImageSize` | - | - | - |
63+
| tip | 提示文案 | string | - | - | - |
64+
| image-mode | 预览图片的 mode 属性 | `ImageMode` | - | aspectFit | 1.2.12 |
65+
| url-prefix | 图片路径前缀，指向图片所在目录，用于拼接图片 URL。 | string | - | https://registry.npmmirror.com/wot-design-uni-assets/*/files/ | $LOWEST_VERSION$ |
5466

5567
### ImageSize
5668

‎src/pages/statusTip/Index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
</demo-block>
4141

4242
<demo-block title="自定义图片">
43-
<wd-status-tip image="https://img.wot-design-uni.cn/static/1.jpg" tip="查看我的头像" />
43+
<wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="查看我的头像" />
4444
</demo-block>
4545
</page-wraper>
4646
</template>

‎src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2024-03-15 13:49:00
4-
* @LastEditTime: 2024-04-07 13:32:22
4+
* @LastEditTime: 2024-09-19 14:45:29
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\types.ts
@@ -53,7 +53,13 @@ export const statusTipProps = {
5353
* 类型：string
5454
* 默认值：'aspectFill'
5555
*/
56-
imageMode: makeStringProp<ImageMode>('aspectFill')
56+
imageMode: makeStringProp<ImageMode>('aspectFill'),
57+
/**
58+
* 图片路径前缀，指向图片所在目录，用于拼接图片 URL。推荐将图片放到自己的服务器上，并设置此属性。
59+
* 类型: string
60+
* 默认值: https://registry.npmmirror.com/wot-design-uni-assets/*\/files/
61+
*/
62+
urlPrefix: makeStringProp('https://registry.npmmirror.com/wot-design-uni-assets/*/files/')
5763
}
5864

5965
export type StatusTipProps = ExtractPropTypes<typeof statusTipProps>

‎src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--
22
* @Author: weisheng
33
* @Date: 2023-06-12 10:04:19
4-
* @LastEditTime: 2024-09-02 16:26:44
4+
* @LastEditTime: 2024-09-19 14:44:17
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
@@ -37,30 +37,10 @@ const props = defineProps(statusTipProps)
3737
const imgUrl = computed(() => {
3838
// 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
3939
let img: string = ''
40-
switch (props.image) {
41-
case 'collect':
42-
img = 'https://img.wot-design-uni.cn/wdu/collect.png'
43-
break
44-
case 'comment':
45-
img = 'https://img.wot-design-uni.cn/wdu/comment.png'
46-
break
47-
case 'content':
48-
img = 'https://img.wot-design-uni.cn/wdu/content.png'
49-
break
50-
case 'halo':
51-
img = 'https://img.wot-design-uni.cn/wdu/halo.png'
52-
break
53-
case 'message':
54-
img = 'https://img.wot-design-uni.cn/wdu/message.png'
55-
break
56-
case 'network':
57-
img = 'https://img.wot-design-uni.cn/wdu/network.png'
58-
break
59-
case 'search':
60-
img = 'https://img.wot-design-uni.cn/wdu/search.png'
61-
break
62-
default:
63-
img = props.image
40+
if (['search', 'network', 'content', 'collect', 'comment', 'halo', 'message'].includes(props.image)) {
41+
img = `${props.urlPrefix}${props.image}.png`
42+
} else {
43+
img = props.image
6444
}
6545
return img
6646
})

0 commit comments

Comments
 (0)