feat: ✨ StatusTip缺省提示组件新增支持图片mode和自定义图片宽高

2025-12-06 17:18:40 +08:00 · 2024-04-07 14:14:18 +08:00 · 2024-04-07 14:14:18 +08:00 · 171c2bbdaf
commit 171c2bbdaf
parent 9a4ceb2116
5 changed files with 91 additions and 56 deletions
--- a/docs/component/status-tip.md
+++ b/docs/component/status-tip.md
@ -1,24 +1,23 @@
 <frame/>

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

 一般用于兜底占位展示。

 > 本组件使用图片均为外链，推荐将图片下载到开发者的服务器后通过自定义图片`URL`使用。

-
 ## 基本用法

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

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

 ## 自定义大小
@ -26,22 +25,36 @@
 通过 `image-size` 属性图片的大小。

 ```html
-<wd-status-tip image-size="100" image="search" tip="当前搜索无结果" />
+<wd-status-tip
+  :image-size="{
+          height: 200,
+          width: 300
+  }"
+  image="search"
+  tip="当前搜索无结果"
+/>
 ```

 ## 自定义图片

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

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

 ## Attributes

-| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
-|-----|------|-----|-------|-------|---------|
-| image | 缺省图片类型，支持传入图片 URL | string | search / network / content / collect / comment / halo / message | network | - |
-| image-size	 | 图片大小，默认单位为 `px`	 | `string`/`number` | - | - | - |
-| tip | 提示文案 | string | - | - | - |
+| 参数       | 说明                           | 类型                          | 可选值                                                          | 默认值    | 最低版本 |
+| ---------- | ------------------------------ | ----------------------------- | --------------------------------------------------------------- | --------- | -------- |
+| image      | 缺省图片类型，支持传入图片 URL | string                        | search / network / content / collect / comment / halo / message | network   | -        |
+| image-size | 图片大小，默认单位为 `px`      | `string`/`number`/`ImageSize` | -                                                               | -         | -        |
+| tip        | 提示文案                       | string                        | -                                                               | -         | -        |
+| image-mode | 预览图片的 mode 属性           | `ImageMode`                   | -                                                               | aspectFit | 1.2.12   |
+
+### ImageSize
+
+| 参数   | 说明                      | 类型             | 可选值 | 默认值 | 最低版本 |
+| ------ | ------------------------- | ---------------- | ------ | ------ | -------- |
+| height | 图片高度，默认单位为 `px` | string \| number | -      | -      | 1.2.12   |
+| width  | 图片宽度，默认单位为 `px` | string \| number | -      | -      | 1.2.12   |
--- a/src/pages/statusTip/Index.vue
+++ b/src/pages/statusTip/Index.vue
@ -29,7 +29,14 @@
    </demo-block>

    <demo-block title="自定义大小">
-      <wd-status-tip image-size="100" image="search" tip="当前搜索无结果" />
+      <wd-status-tip
+        :image-size="{
+          height: 200,
+          width: 300
+        }"
+        image="search"
+        tip="当前搜索无结果"
+      />
    </demo-block>

    <demo-block title="自定义图片">
--- a/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
@ -21,9 +21,8 @@
  flex-direction: column;
  align-items: center;

-  @include e(image) {
+  @include edeep(image) {
    margin: 0 auto;
-    display: block;
    width: 160px;
    height: 160px;
  }
--- a/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts
@ -1,14 +1,26 @@
 /*
 * @Author: weisheng
 * @Date: 2024-03-15 13:49:00
- * @LastEditTime: 2024-03-18 17:19:32
+ * @LastEditTime: 2024-04-07 13:32:22
 * @LastEditors: weisheng
 * @Description:
 * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\types.ts
 * 记得注释
 */
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeStringProp } from '../common/props'
+import type { ImageMode } from '../wd-img/types'
+
+export type ImageSize = {
+  /**
+   * 宽度
+   */
+  width: number | string
+  /**
+   * 高度
+   */
+  height: number | string
+}

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

  /**
   * 图片大小，默认单位为 `px`。
-   * 类型: string 或 number
+   * 类型: string 或 number 或 ImageSize
   * 默认值: 空字符串
   */
-  imageSize: makeStringProp(''),
-
+  imageSize: {
+    type: [String, Number, Object] as PropType<string | number | ImageSize>,
+    default: ''
+  },
  /**
   * 提示文案。
   * 类型: string
   * 默认值: 空字符串
   */
-  tip: makeStringProp('')
+  tip: makeStringProp(''),
+  /**
+   * 图片裁剪、缩放的模式
+   * 类型：string
+   * 默认值：'aspectFill'
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFill')
 }

 export type StatusTipProps = ExtractPropTypes<typeof statusTipProps>
--- a/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: weisheng
 * @Date: 2023-06-12 10:04:19
- * @LastEditTime: 2024-01-26 12:42:13
+ * @LastEditTime: 2024-04-07 14:01:12
 * @LastEditors: weisheng
 * @Description: 
 * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
@ -9,7 +9,7 @@
 -->
 <template>
  <view :class="`wd-status-tip  ${customClass}`" :style="customStyle">
-    <image v-if="imgUrl" class="wd-status-tip__image" :src="imgUrl" :style="imgStyle"></image>
+    <wd-img v-if="imgUrl" :mode="imageMode" :src="imgUrl" custom-class="wd-status-tip__image" :custom-style="imgStyle"></wd-img>
    <view v-if="tip" class="wd-status-tip__text">{{ tip }}</view>
  </view>
 </template>
@ -26,37 +26,14 @@ export default {
 </script>

 <script lang="ts" setup>
-import { computed, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, objToStyle } from '../common/util'
+import { computed, type CSSProperties } from 'vue'
+import { addUnit, isDef, isObj, objToStyle } from '../common/util'
 import { statusTipProps } from './types'

 const props = defineProps(statusTipProps)

-const imgUrl = ref<string>('') // 图片地址
-
-watch(
-  () => props.image,
-  () => {
-    checkType()
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
-const imgStyle = computed(() => {
-  let style: CSSProperties = {}
-  if (props.imageSize) {
-    style = {
-      height: addUnit(props.imageSize),
-      width: addUnit(props.imageSize)
-    }
-  }
-  return `${objToStyle(style)}`
-})
-
-function checkType() {
+// 图片地址
+const imgUrl = computed(() => {
  // 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
  let img: string = ''
  switch (props.image) {
@ -84,8 +61,27 @@ function checkType() {
    default:
      img = props.image
  }
-  imgUrl.value = img
-}
+  return img
+})
+
+/**
+ * 图片样式
+ */
+const imgStyle = computed(() => {
+  let style: CSSProperties = {}
+  if (props.imageSize) {
+    if (isObj(props.imageSize)) {
+      isDef(props.imageSize.height) && (style.height = addUnit(props.imageSize.height))
+      isDef(props.imageSize.width) && (style.width = addUnit(props.imageSize.width))
+    } else {
+      style = {
+        height: addUnit(props.imageSize),
+        width: addUnit(props.imageSize)
+      }
+    }
+  }
+  return `${objToStyle(style)}`
+})
 </script>
 <style lang="scss" scoped>
@import './index.scss';