uniapp 微信小程序 数据空白展示组件

效果图

html

<template><view class="nodata"><view class=""><image class="nodataimg":src="$publicfun.locaAndHttp()?localUrl:$publicfun.httpUrlImg(httUrl)"mode="aspectFit"></image><view class="tips">{{tips}}</view></view></view>
</template><script>export default {name: "nodata",data() {return {};},props: {tips: {default: '暂无数据~',type: String},localUrl: {default: '',type: String},httUrl: {default: '',type: String}}}
</script><style lang="scss" scoped>.nodata {width: 100%;height: 500rpx;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;.nodataimg {width: 160px;height: 120px;}.tips {width: 100%;text-align: center;color: #999;font-size: 26rpx;margin-top: 20rpx;}}
</style>

关于

定义的全局方法

$publicfun.locaAndHttp()   判断是不是网络路径

localUrl   本地路径

$publicfun.httpUrlImg(httUrl)   网路路径

图片

需求图片

使用

<nodata v-if="orderlist.length==0" :tips="'暂无订单'" :localUrl="'../../static/all/order-empty.png'":httUrl="'order-empty.png'"></nodata>