# No Data

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

# 组件结构

<template>
	<view class="tui-nodata-box" :class="[fixed?'tui-nodata-fixed':'']">
		<image v-if="imgUrl" :src="imgUrl" class="tui-tips-icon" :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}"></image>
		<view class="tui-tips-content">
			<slot></slot>
		</view>
		<button class="tui-tips-btn" hover-class="tui-tips-btn-hover" :style="{width:btnWidth+'rpx'}" v-if="btnText"  @tap="handleClick">{{btnText}}</button>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: "tuiNoData",
		
		...省略n行
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
fixed Boolean 是否垂直居中 true
imgUrl String 图片地址,没有则不显示 ""
imgWidth Number 图片宽度 200
imgHeight Number 图片高度 200
btnWidth Number 按钮宽度 200
btnHeight Number 按钮高度 60
btnText String 按钮文字,没有则不显示 ""
backgroundColor String 按钮背景色,可设置渐变色 #EB0909
size Number 按钮文字大小 28
radius String 按钮圆角 8rpx

# methods

名称 描述
@click 按钮点击事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/nodata/nodata

# H5二维码

# 小程序二维码