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
btnText String 按钮文字,没有则不显示 ""

methods

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

示例

H5预览地址

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

H5二维码

小程序二维码