mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 17:48:34 +08:00
feat: ✨ 优化缺省状态组件StautsTip，增加支持自定义url和图片大小
This commit is contained in:
xuqingkai
weisheng
parent
069ce639cc
commit
f463d3258a
@ -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 | - | - | - |
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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>
|
||||
🔥 <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)。
|
||||
|
||||
## 链接
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user