更新记录
1.0.0(2025-07-14)
2025-7-14 1.0版本 开发完成
平台兼容性
uni-app(4.75)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
× |
- |
- |
- |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
- |
- |
uni-app x(4.06)
Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
- |
- |
- |
- |
- |
√ |
其他
插件说明
这是一个高可定制化的空状态组件,支持 H5
小程序
手机端
。
使用说明
1、最基本用法
<fzbEmpty :imgUrl="icon1" :showBtn="false" :imgHeight="iconHeight" :imgWidth="iconWidth" :tipText="text1"></fzbEmpty>
<fzbEmpty :imgUrl="icon2" @btnjump="jump" :tipFontSize="30" :tipColor="'#ccc'" :imgHeight="iconHeight" :imgWidth="iconWidth" :tipText="text2"></fzbEmpty>
import fzbEmpty from "@/components/fzbEmpty/fzbEmpty.vue"
export default {
components:{
fzbEmpty
},
data() {
return {
icon1:"//res.hc-cdn.com/msgcenter/10.6.209/mctiny3/hws/empty-envelope.c85a0ef5db1bf1c8.svg",
text1:"远程图片资源",
icon2:"/static/tabbar/mine_tn.png",
text2:"本地图标资源",
iconWidth:128,
iconHeight:128
}
},
methods:{
//按钮点击跳转事件
jump(e){
console.log(e);
// 这里写跳转逻辑
}
}
}
文档说明
1、详细参数属性说明
参数属性 |
类型 |
默认值 |
说明 |
imgUrl |
string |
'' |
可以是远程url 也可以是本地图片图标 |
imgHeight |
Number |
128 |
图标图片 高度 单位值 rpx |
imgWidth |
Number |
128 |
图标图片 宽度 单位值 rpx |
tipText |
String |
'暂无数据' |
图标下面提示文字 |
tipFontSize |
Number |
24 |
提示文字大小 单位rpx |
tipColor |
String |
#ccc |
提示文字颜色 16进制颜色值 |
showBtn |
Boolean |
false |
提示文字下面 是否显示按钮 |
btnText |
String |
'随便看看' |
按钮文字 |
btnFontSize |
Number |
20 |
按钮文字 大小 单位 rpx |
btnBgColor |
String |
'#000' |
按钮背景颜色 |
btnColor |
String |
'#fff' |
按钮文字颜色 |
按钮事件
@btnjump
写在最后:
欢迎各位老兄反馈使用问题,本人后端程序开发者,因为对前端深感兴趣,所以自己写的一个小组件。如果你在使用的过程中有什么不合理,需要优化的,都可以在下面评论(或: ),本人看见后回复、修正,感谢。