空状态

空状态组件。

基础使用

• 通过 iconName 属性设置空状态图标。
• 通过 text 属性设置空状态文本。

<template>
	<pure-empty
		iconName="/static/no-goods.png"
		text="Ops，您还未添加任何商品，去逛逛吧!"
	></pure-empty>
</template>

扩展内容

通过默认插槽扩展内容。

<template>
	<pure-empty
		class="empty"
		iconName="/static/images/i_e02.png"
		text="Ops，您还未添加任何商品，去逛逛吧!"
	>
		<view class="footer">
			<pure-button
				text="回首页"
				theme="primary"
				link
			></pure-button>
			<pure-button
				text="逛一逛"
				theme="success"
				link
			></pure-button>
		</view>
	</pure-empty>
</template>

<style lang="scss" scoped>
	.empty {
		padding: 60px 20px;
		background: #ffffff;
		border-radius: 5px;
		font-size: var(--pure-font-size-smaller);
	}

	.footer {
		display: flex;
		flex-direction: row;
		gap: 10px;
		margin-top: 10px;
	}
</style>

属性

名称	类型	默认值	说明
iconName	String		图标名称
iconOpts	Object		图标的配置 参考
text	String		文本

插槽

名称	参数	说明
#icon		图标
#text		文本
#default		默认，额外内容

样式变量

名称	说明
--pure-empty-gap	内容之间的间距
--pure-empty-icon-font-size	图标字体大小
--pure-empty-icon-font-weight	图标字体粗细
--pure-empty-icon-color	图标颜色
--pure-empty-icon-margin	图标外边距
--pure-empty-icon-padding	图标内边距
--pure-empty-icon-image-width	图标图片宽度
--pure-empty-icon-image-height	图标图片高度
--pure-empty-text-color	文本颜色
--pure-empty-text-font-weight	文本字体粗细
--pure-empty-text-margin	文本外边距
--pure-empty-text-padding	文本内边距