# tui-no-data 暂无数据开源组件

介绍

无数据提示：默认居中显示，可设置。带操作按钮，可隐藏，可在插槽中自定义需要展示的效果。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiNoData from "@/components/thorui/tui-no-data/tui-no-data.vue"
export default {
	components:{
		tuiNoData
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-no-data": "/components/thorui/tui-no-data/tui-no-data"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 imgUrl 属性设置显示的图标。

<tui-no-data imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-no-data>

显示操作按钮

通过 btnText 属性设置按钮文字，当该属性值为空时不显示按钮。click 为按钮点击事件。

<!--uni-app-->
<tui-no-data imgUrl="/static/images/toast/img_noorder_3x.png"  btnText="去逛逛" @click="go">
  <text class="tui-color__black">您还没有购买任何商品~</text>
  <!--如果需要自定义按钮，可在插槽中自定义，不使用默认按钮-->
</tui-no-data>

// data 数据 及 方法
export default {
  data() {
  	return {
  		
  	}
  },
  methods: {
  	go() {
  	  uni.navigateBack()
  	}
  }
}

<!--微信小程序-->
<tui-no-data imgUrl="/static/images/toast/img_noorder_3x.png"  btnText="去逛逛" bindclick="go">
  <text class="tui-color__black">您还没有购买任何商品~</text>
  <!--如果需要自定义按钮，可在插槽中自定义，不使用默认按钮-->
</tui-no-data>

// data 数据 及 方法
Page({
  data: {
   
  },
  go() {
    wx.navigateBack()
  }
})

// Make sure to add code blocks to your code group

# Slots

插槽名称	说明
default	标签显示内容，可自定义操作按钮

# Props

属性名	类型	说明	默认值
fixed	Boolean	是否垂直居中	true
imgUrl	String	图片地址，没有则不显示	-
imgWidth	Number,String	图片宽度	200
imgHeight	Number,String	图片高度	200
imgBottom V2.8.0+	Number,String	图片距离底部底部内容间距，单位rpx	30
btnWidth	Number,String	按钮宽度	200
btnHeight	Number,String	按钮高度	60
btnText	String	按钮文字，没有则不显示	-
backgroundColor	String	按钮背景色，可设置渐变色	#EB0909
size	Number,String	按钮文字大小	28
radius	String	按钮圆角	8rpx
marginTop V2.8.0+	Number,String	组件距离顶部内容间距，单位rpx	0

# Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	按钮点击事件	{}

# 预览

# 特别说明

该组件为 开源组件，uni-app版所有用户均可免费使用。
微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

# 线上程序扫码预览


ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码

← tui-alert 弹框 tui-toast 提示 →