Skip to content

Commit 171c2bb

Browse files
author
xuqingkai
committed
feat: ✨ StatusTip缺省提示组件新增支持图片mode和自定义图片宽高
1 parent 9a4ceb2 commit 171c2bb

5 files changed

Lines changed: 91 additions & 56 deletions

File tree

‎docs/component/status-tip.md‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,60 @@
11
<frame/>
22

3-
# StatusTip 缺省提示
3+
# StatusTip 缺省提示
44

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

77
> 本组件使用图片均为外链，推荐将图片下载到开发者的服务器后通过自定义图片`URL`使用。
88
9-
109
## 基本用法
1110

1211
设置 `image` 修改展示缺省图片类型，默认为 `network`，可选值 `search`, `network`, `content`, `collect`, `comment`, `halo`, `message`。可设置 `tip` 来控制展示提示文案。
1312

1413
```html
15-
<wd-status-tip image="search" tip="当前搜索无结果"/>
16-
<wd-status-tip image="network" tip="该页面暂时无法访问"/>
17-
<wd-status-tip image="content" tip="暂无内容"/>
18-
<wd-status-tip image="collect" tip="暂无收藏"/>
19-
<wd-status-tip image="comment" tip="当前没有联系人名单哦～"/>
20-
<wd-status-tip image="halo" tip="支付失败，请重新订购"/>
21-
<wd-status-tip image="message" tip="已订阅全部消息"/>
14+
<wd-status-tip image="search" tip="当前搜索无结果" />
15+
<wd-status-tip image="network" tip="该页面暂时无法访问" />
16+
<wd-status-tip image="content" tip="暂无内容" />
17+
<wd-status-tip image="collect" tip="暂无收藏" />
18+
<wd-status-tip image="comment" tip="当前没有联系人名单哦～" />
19+
<wd-status-tip image="halo" tip="支付失败，请重新订购" />
20+
<wd-status-tip image="message" tip="已订阅全部消息" />
2221
```
2322

2423
## 自定义大小
2524

2625
通过 `image-size` 属性图片的大小。
2726

2827
```html
29-
<wd-status-tip image-size="100" image="search" tip="当前搜索无结果" />
28+
<wd-status-tip
29+
:image-size="{
30+
height: 200,
31+
width: 300
32+
}"
33+
image="search"
34+
tip="当前搜索无结果"
35+
/>
3036
```
3137

3238
## 自定义图片
3339

3440
需要自定义图片时，可以在 `image` 属性中传入任意图片 URL。
3541

36-
3742
```html
3843
<wd-status-tip image="https://img.wot-design-uni.cn/static/1.jpg" tip="查看我的头像" />
3944
```
4045

4146
## Attributes
4247

43-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
44-
|-----|------|-----|-------|-------|---------|
45-
| image | 缺省图片类型，支持传入图片 URL | string | search / network / content / collect / comment / halo / message | network | - |
46-
| image-size | 图片大小，默认单位为 `px` | `string`/`number` | - | - | - |
47-
| tip | 提示文案 | string | - | - | - |
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 |
54+
55+
### ImageSize
56+
57+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
58+
| ------ | ------------------------- | ---------------- | ------ | ------ | -------- |
59+
| height | 图片高度，默认单位为 `px` | string \| number | - | - | 1.2.12 |
60+
| width | 图片宽度，默认单位为 `px` | string \| number | - | - | 1.2.12 |

‎src/pages/statusTip/Index.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,14 @@
2929
</demo-block>
3030

3131
<demo-block title="自定义大小">
32-
<wd-status-tip image-size="100" image="search" tip="当前搜索无结果" />
32+
<wd-status-tip
33+
:image-size="{
34+
height: 200,
35+
width: 300
36+
}"
37+
image="search"
38+
tip="当前搜索无结果"
39+
/>
3340
</demo-block>
3441

3542
<demo-block title="自定义图片">

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,8 @@
2121
flex-direction: column;
2222
align-items: center;
2323

24-
@include e(image) {
24+
@include edeep(image) {
2525
margin: 0 auto;
26-
display: block;
2726
width: 160px;
2827
height: 160px;
2928
}

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

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2024-03-15 13:49:00
4-
* @LastEditTime: 2024-03-18 17:19:32
4+
* @LastEditTime: 2024-04-07 13:32:22
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\types.ts
88
* 记得注释
99
*/
10-
import type { ExtractPropTypes } from 'vue'
10+
import type { ExtractPropTypes, PropType } from 'vue'
1111
import { baseProps, makeStringProp } from '../common/props'
12+
import type { ImageMode } from '../wd-img/types'
13+
14+
export type ImageSize = {
15+
/**
16+
* 宽度
17+
*/
18+
width: number | string
19+
/**
20+
* 高度
21+
*/
22+
height: number | string
23+
}
1224

1325
export const statusTipProps = {
1426
...baseProps,
@@ -23,17 +35,25 @@ export const statusTipProps = {
2335

2436
/**
2537
* 图片大小，默认单位为 `px`。
26-
* 类型: string 或 number
38+
* 类型: string 或 number 或 ImageSize
2739
* 默认值: 空字符串
2840
*/
29-
imageSize: makeStringProp(''),
30-
41+
imageSize: {
42+
type: [String, Number, Object] as PropType<string | number | ImageSize>,
43+
default: ''
44+
},
3145
/**
3246
* 提示文案。
3347
* 类型: string
3448
* 默认值: 空字符串
3549
*/
36-
tip: makeStringProp('')
50+
tip: makeStringProp(''),
51+
/**
52+
* 图片裁剪、缩放的模式
53+
* 类型：string
54+
* 默认值：'aspectFill'
55+
*/
56+
imageMode: makeStringProp<ImageMode>('aspectFill')
3757
}
3858

3959
export type StatusTipProps = ExtractPropTypes<typeof statusTipProps>

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

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<!--
22
* @Author: weisheng
33
* @Date: 2023-06-12 10:04:19
4-
* @LastEditTime: 2024-01-26 12:42:13
4+
* @LastEditTime: 2024-04-07 14:01:12
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
88
* 记得注释
99
-->
1010
<template>
1111
<view :class="`wd-status-tip ${customClass}`" :style="customStyle">
12-
<image v-if="imgUrl" class="wd-status-tip__image" :src="imgUrl" :style="imgStyle"></image>
12+
<wd-img v-if="imgUrl" :mode="imageMode" :src="imgUrl" custom-class="wd-status-tip__image" :custom-style="imgStyle"></wd-img>
1313
<view v-if="tip" class="wd-status-tip__text">{{ tip }}</view>
1414
</view>
1515
</template>
@@ -26,37 +26,14 @@ export default {
2626
</script>
2727

2828
<script lang="ts" setup>
29-
import { computed, ref, watch, type CSSProperties } from 'vue'
30-
import { addUnit, objToStyle } from '../common/util'
29+
import { computed, type CSSProperties } from 'vue'
30+
import { addUnit, isDef, isObj, objToStyle } from '../common/util'
3131
import { statusTipProps } from './types'
3232
3333
const props = defineProps(statusTipProps)
3434
35-
const imgUrl = ref<string>('') // 图片地址
36-
37-
watch(
38-
() => props.image,
39-
() => {
40-
checkType()
41-
},
42-
{
43-
deep: true,
44-
immediate: true
45-
}
46-
)
47-
48-
const imgStyle = computed(() => {
49-
let style: CSSProperties = {}
50-
if (props.imageSize) {
51-
style = {
52-
height: addUnit(props.imageSize),
53-
width: addUnit(props.imageSize)
54-
}
55-
}
56-
return `${objToStyle(style)}`
57-
})
58-
59-
function checkType() {
35+
// 图片地址
36+
const imgUrl = computed(() => {
6037
// 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
6138
let img: string = ''
6239
switch (props.image) {
@@ -84,8 +61,27 @@ function checkType() {
8461
default:
8562
img = props.image
8663
}
87-
imgUrl.value = img
88-
}
64+
return img
65+
})
66+
67+
/**
68+
* 图片样式
69+
*/
70+
const imgStyle = computed(() => {
71+
let style: CSSProperties = {}
72+
if (props.imageSize) {
73+
if (isObj(props.imageSize)) {
74+
isDef(props.imageSize.height) && (style.height = addUnit(props.imageSize.height))
75+
isDef(props.imageSize.width) && (style.width = addUnit(props.imageSize.width))
76+
} else {
77+
style = {
78+
height: addUnit(props.imageSize),
79+
width: addUnit(props.imageSize)
80+
}
81+
}
82+
}
83+
return `${objToStyle(style)}`
84+
})
8985
</script>
9086
<style lang="scss" scoped>
9187
@import './index.scss';

0 commit comments

Comments
 (0)