feat: ✨ 优化缺省状态组件StautsTip，增加支持自定义url和图片大小

Moonofweisheng · Sep 2, 2023 · f463d32 · f463d32
1 parent 069ce63
commit f463d32
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 42 deletions.
diff --git a/docs/component/statusTip.md b/docs/component/statusTip.md
@@ -4,26 +4,44 @@
 
 一般用于兜底占位展示。
 
-> 若图片显示安全域名问题，需将 img11.360buyimg.com 域名添加为业务域名。
+> 本组件使用图片均为外链，推荐将图片下载到开发者的服务器后通过自定义图片`URL`使用。
 
 
 ## 基本用法
 
-设置 `type` 修改展示缺省图片类型，默认为 'network'，可选值 'search', 'network', 'content', 'collect', 'comment', 'halo', 'message'。可设置 `tip` 来控制展示提示文案。
+设置 `image` 修改展示缺省图片类型，默认为 `network`，可选值 `search`, `network`, `content`, `collect`, `comment`, `halo`, `message`。可设置 `tip` 来控制展示提示文案。
 
 ```html
-<wd-status-tip type="search" tip="当前搜索无结果"/>
-<wd-status-tip type="network" tip="该页面暂时无法访问"/>
-<wd-status-tip type="content" tip="暂无内容"/>
-<wd-status-tip type="collect" tip="暂无收藏"/>
-<wd-status-tip type="comment" tip="当前没有联系人名单哦～"/>
-<wd-status-tip type="halo" tip="支付失败，请重新订购"/>
-<wd-status-tip type="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="已订阅全部消息"/>
+```
+
+## 自定义大小
+
+通过 `image-size` 属性图片的大小。
+
+```html
+<wd-status-tip image-size="100" image="search" tip="当前搜索无结果" />
+```
+
+## 自定义图片
+
+需要自定义图片时，可以在 `image` 属性中传入任意图片 URL。
+
+
+```html
+<wd-status-tip image="https://img.wot-design-uni.cn/static/1.jpg" tip="查看我的头像" />
 ```
 
 ## Attributes
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
 |-----|------|-----|-------|-------|---------|
-| type | 缺省类型 | string | search / network / content / collect / comment / halo / message | network | - |
+| image | 缺省图片类型，支持传入图片 URL | string | search / network / content / collect / comment / halo / message | network | - |
+| image-size	 | 图片大小，默认单位为 `px`	 | `string`/`number` | - | - | - |
 | tip | 提示文案 | string | - | - | - |
diff --git a/src/pages/statusTip/Index.vue b/src/pages/statusTip/Index.vue
@@ -1,31 +1,39 @@
 <template>
   <page-wraper>
     <demo-block title="搜索无结果">
-      <wd-status-tip type="search" tip="当前搜索无结果" />
+      <wd-status-tip image="search" tip="当前搜索无结果" />
     </demo-block>
 
     <demo-block title="404页面">
-      <wd-status-tip type="network" tip="当前网络不可用，请检查你的网络设置" />
+      <wd-status-tip image="network" tip="当前网络不可用，请检查你的网络设置" />
     </demo-block>
 
-    <demo-block title="页面无数据">
-      <wd-status-tip type="content" tip="暂无内容" />
+    <demo-block title="页面暂无内容">
+      <wd-status-tip image="content" tip="暂无内容" />
     </demo-block>
 
     <demo-block title="我的收藏为空">
-      <wd-status-tip type="collect" tip="暂无收藏" />
+      <wd-status-tip image="collect" tip="暂无收藏" />
     </demo-block>
 
     <demo-block title="我的评论为空">
-      <wd-status-tip type="comment" tip="暂无评论" />
+      <wd-status-tip image="comment" tip="暂无评论" />
     </demo-block>
 
     <demo-block title="支付失败">
-      <wd-status-tip type="halo" tip="支付失败，请重新订购" />
+      <wd-status-tip image="halo" tip="支付失败，请重新订购" />
     </demo-block>
 
     <demo-block title="已订阅全部消息">
-      <wd-status-tip type="message" tip="已订阅全部消息" />
+      <wd-status-tip image="message" tip="已订阅全部消息" />
+    </demo-block>
+
+    <demo-block title="自定义大小">
+      <wd-status-tip image-size="100" image="search" tip="当前搜索无结果" />
+    </demo-block>
+
+    <demo-block title="自定义图片">
+      <wd-status-tip image="https://img.wot-design-uni.cn/static/1.jpg" tip="查看我的头像" />
     </demo-block>
   </page-wraper>
 </template>

diff --git 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
@@ -17,12 +17,15 @@
   color: $-statustip-color;
   font-size: $-statustip-fs;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   @include e(image) {
     margin: 0 auto;
     display: block;
-    width: 300px;
-    height: 200px;
+    width: 160px;
+    height: 160px;
   }
   @include e(text) {
     margin: 20px auto 0;

diff --git 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,17 +1,17 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-06-12 10:04:19
- * @LastEditTime: 2023-08-15 17:58:23
+ * @LastEditTime: 2023-09-02 15:12:03
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
  * 记得注释
 -->
 <template>
-  <div :class="`wd-status-tip  ${customClass}`" :style="customStyle">
-    <image v-if="imgUrl" class="wd-status-tip__image" :src="imgUrl"></image>
+  <view :class="`wd-status-tip  ${customClass}`" :style="customStyle">
+    <image v-if="imgUrl" class="wd-status-tip__image" :src="imgUrl" :style="imgStyle"></image>
     <view v-if="tip" class="wd-status-tip__text">{{ tip }}</view>
-  </div>
+  </view>
 </template>
 
 <script lang="ts">
@@ -26,28 +26,29 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-
-type StatusTipType = 'search' | 'network' | 'content' | 'collect' | 'comment' | 'halo' | 'message'
+import { computed, ref, watch } from 'vue'
+import { addUnit, objToStyle } from '../common/util'
 
 interface Props {
   customClass?: string
   customStyle?: string
-  type?: StatusTipType
+  image?: string
+  imageSize?: string
   tip?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   customClass: '',
   customStyle: '',
-  type: 'network',
+  image: 'network',
+  imageSize: '',
   tip: ''
 })
 
 const imgUrl = ref<string>('') // 图片地址
 
 watch(
-  () => props.type,
+  () => props.image,
   () => {
     checkType()
   },
@@ -57,33 +58,44 @@ watch(
   }
 )
 
+const imgStyle = computed(() => {
+  let style: Record<string, string> = {}
+  if (props.imageSize) {
+    style = {
+      height: addUnit(props.imageSize),
+      width: addUnit(props.imageSize)
+    }
+  }
+  return `${objToStyle(style)}`
+})
+
 function checkType() {
   // 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
-  let img = 'https://img11.360buyimg.com/ftfman/jfs/t1/148420/6/17526/26156/5fd03b9eE0119edb0/0d93541f6085c74c.png'
-  switch (props.type) {
+  let img: string = ''
+  switch (props.image) {
     case 'collect':
-      img = 'https://img11.360buyimg.com/ftfman/jfs/t1/146876/19/17683/28878/5fd03b70E2e029d9d/b3ebf4444ec144cf.png'
+      img = 'https://img.wot-design-uni.cn/wdu/collect.png'
       break
     case 'comment':
-      img = 'https://img11.360buyimg.com/ftfman/jfs/t1/136543/33/19003/31469/5fd03b92E510000ff/0f9f2f302d8c084f.png'
+      img = 'https://img.wot-design-uni.cn/wdu/comment.png'
       break
     case 'content':
-      img = 'https://img11.360buyimg.com/ftfman/jfs/t1/140894/19/17605/31485/5fd03b8dE22c82234/0506be411332b914.png'
+      img = 'https://img.wot-design-uni.cn/wdu/content.png'
       break
     case 'halo':
-      img = 'https://img11.360buyimg.com/ftfman/jfs/t1/137867/20/17583/28484/5fd03b96E99da5386/eae93dc441c061b6.png'
+      img = 'https://img.wot-design-uni.cn/wdu/halo.png'
       break
     case 'message':
-      img = 'https://img11.360buyimg.com/ftfman/jfs/t1/145522/14/17551/32214/5fd03b9aE7de897d8/066e511adebe4223.png'
+      img = 'https://img.wot-design-uni.cn/wdu/message.png'
       break
     case 'network':
-      img = 'https://img11.360buyimg.com/ftfman/jfs/t1/148420/6/17526/26156/5fd03b9eE0119edb0/0d93541f6085c74c.png'
+      img = 'https://img.wot-design-uni.cn/wdu/network.png'
       break
     case 'search':
-      img = 'https://img11.360buyimg.com/ftfman/jfs/t1/130609/24/19259/35205/5fd03cc7E49456a46/4fb443c24e0cf799.png'
+      img = 'https://img.wot-design-uni.cn/wdu/search.png'
       break
     default:
-      img = 'https://img11.360buyimg.com/ftfman/jfs/t1/148420/6/17526/26156/5fd03b9eE0119edb0/0d93541f6085c74c.png'
+      img = props.image
   }
   imgUrl.value = img
 }

diff --git a/src/uni_modules/wot-design-uni/readme.md b/src/uni_modules/wot-design-uni/readme.md
@@ -34,7 +34,8 @@
 </p>
 
 <p align="center">
-  🔥 <a href="https://wot-design-uni.cn/">文档网站 (Netlify)</a>
+  🚀 <a href="https://wot-design-uni.cn/">文档网站 (官网)</a>&nbsp;
+  🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
 </p>
 
 ## ✨ 特性
@@ -58,7 +59,7 @@
 
 ## 快速上手
 
-详细说明见 [快速上手](https://wot-design-uni.cn/guide/quickUse.html)
+详细说明见 [快速上手](https://wot-design-uni.cn/guide/quickUse.html)。
 
 ## 链接