一款uniapp小程序空状态组件empty支持自定义图标大小提示文字大小颜色是否显示button

uniapp小程序开发 空状态组件fzbEmpty

获取地址

插件说明

这是一个高可定制化的空状态组件，支持 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	按钮点击事件 透传到外面 做跳转使用