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

docs/component/status-tip.md

@@ -6,19 +6,18 @@
 
 > 本组件使用图片均为外链，推荐将图片下载到开发者的服务器后通过自定义图片`URL`使用。
 
-
 ## 基本用法
 
 设置 `image` 修改展示缺省图片类型，默认为 `network`，可选值 `search`, `network`, `content`, `collect`, `comment`, `halo`, `message`。可设置 `tip` 来控制展示提示文案。
 
 ```html
-<wd-status-tip image="search" tip="当前搜索无结果"/>
+<wd-status-tip image="search" tip="当前搜索无结果" />
-<wd-status-tip image="network" tip="该页面暂时无法访问"/>
+<wd-status-tip image="network" tip="该页面暂时无法访问" />
-<wd-status-tip image="content" tip="暂无内容"/>
+<wd-status-tip image="content" tip="暂无内容" />
-<wd-status-tip image="collect" tip="暂无收藏"/>
+<wd-status-tip image="collect" tip="暂无收藏" />
-<wd-status-tip image="comment" tip="当前没有联系人名单哦～"/>
+<wd-status-tip image="comment" tip="当前没有联系人名单哦～" />
-<wd-status-tip image="halo" tip="支付失败，请重新订购"/>
+<wd-status-tip image="halo" tip="支付失败，请重新订购" />
-<wd-status-tip image="message" tip="已订阅全部消息"/>
+<wd-status-tip image="message" tip="已订阅全部消息" />
 ```
 
 ## 自定义大小
@@ -26,14 +25,20 @@
 通过 `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="查看我的头像" />
 ```
@@ -41,7 +46,15 @@
 ## Attributes
 
 | 参数       | 说明                           | 类型                          | 可选值                                                          | 默认值    | 最低版本 |
-|-----|------|-----|-------|-------|---------|
+| ---------- | ------------------------------ | ----------------------------- | --------------------------------------------------------------- | --------- | -------- |
 | image      | 缺省图片类型，支持传入图片 URL | string                        | search / network / content / collect / comment / halo / message | network   | -        |
-| image-size	 | 图片大小，默认单位为 `px`	 | `string`/`number` | - | - | - |
+| 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   |

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="自定义图片">

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;
   }

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>

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 { computed, type CSSProperties } from 'vue'
-import { addUnit, objToStyle } from '../common/util'
+import { addUnit, isDef, isObj, objToStyle } from '../common/util'
 import { statusTipProps } from './types'
 
 const props = defineProps(statusTipProps)
 
-const imgUrl = ref<string>('') // 图片地址
+// 图片地址
-
+const imgUrl = computed(() => {
-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() {
   // 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
   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';