更新记录

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

写在最后: 欢迎各位老兄反馈使用问题,本人后端程序开发者,因为对前端深感兴趣,所以自己写的一个小组件。如果你在使用的过程中有什么不合理,需要优化的,都可以在下面评论(或: ),本人看见后回复、修正,感谢。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问