空内容 Empty

• 支持自定义图标
• 支持自定义提示语
• 支持自定义按钮

插件市场地址

https://ext.dcloud.net.cn/plugin?name=pure-empty

基础使用

• 通过 icon 属性设置图标名称
• 通过 tip 属性设置提示语，如果将 tip 属性设置为空，则提示语不显示

<pure-empty icon="empty" tip="购物车空空如也~"></pure-empty>

底部按钮

• 通过 btn 属性设置是否显示默认按钮
• 通过 btnClass 属性给默认按钮添加类名
• 通过 btnProps 属性设置默认按钮 props

<pure-empty btn btnClass="pure-button-warning" :btnProps="btnProps"></pure-empty>

<script setup>
import { ref } from 'vue';

const btnProps = ref({
    text: '去逛逛',
});
</script>

Props

属性名	说明	类型	默认值	可选值	版本
icon	图标名称，同图标组件（Icon）的 name 属性，参考	String	__wupin	-	+1.0.0
mode	图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	heightFix	-	+1.0.0
tip	提示语	String	暂无数据	-	+1.0.0
btn	是否显示默认按钮	Boolean	false	true	+1.0.0
btnClass	默认按钮的自定义类名	String	pure-button-success	-	+1.0.0
btnProps	默认按钮的配置对象，参考	Object	null	-	+1.0.0

Event

事件名	说明	回调参数	版本
同 <pure-button> 组件的事件	参考	-	1.0.0

Slots

提示

京东小程序不支持 slot。

名称	说明	参数	版本
default	底部区域	-	+1.0.0
icon	图标	-	+1.0.0
tip	提示	-	+1.0.0

样式变量

变量名	默认值	版本
--pure-empty-display	flex	+1.0.0
--pure-empty-flex-direction	column	+1.0.0
--pure-empty-align-items	center	+1.0.0
--pure-empty-justify-content	center	+1.0.0
--pure-empty-background	var(--pure-background-element)	+1.0.0
--pure-empty-border-radius	6px	+1.0.0
--pure-empty-line-height	1	+1.0.0
--pure-empty-padding	50px 20px	+1.0.0
--pure-empty-text-align	center	+1.0.0
--pure-empty-icon-font-size	32px	+1.0.0
--pure-empty-icon-color	-	+1.0.0
--pure-empty-icon-opacity	var(--pure-opacity-lighter-text)	+1.0.0
--pure-empty-tip-margin	10px 0 0 0	+1.0.0
--pure-empty-tip-font-size	var(--pure-font-size-smaller)	+1.0.0
--pure-empty-tip-color	1	+1.0.6
--pure-empty-icon-opacity	var(--pure-opacity-lighter-text)	+1.0.6
--pure-empty-bottom-margin	20px 0 0 0	+1.0.4
--pure-empty-bottom-display	flex	+1.0.0
--pure-empty-bottom-flex-direction	row	+1.0.0
--pure-empty-bottom-align-items	center	+1.0.0
--pure-empty-bottom-justify-content	center	+1.0.0
--pure-empty-bottom-gap	8px	+1.0.0
--pure-empty-button-font-size	var(--pure-font-size-smaller)	+1.0.0
--pure-empty-button-height	2.5em	+1.0.0
--pure-empty-button-padding	0 8px	+1.0.0