空内容 Empty

空内容组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

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

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

底部按钮

• 通过 btn 属性设置是否显示底部按钮。
• 通过 btnClass 属性给按钮添加类名。
• 通过 btnProps 属性设置按钮 props，对应 pure-button 组件的 props。

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

<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

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