26 lines
885 B
Vue
26 lines
885 B
Vue
<script setup>
|
||
/**
|
||
* 空状态
|
||
*
|
||
* ⚠️ 不要给根节点挂白卡样式（bg-white / 描边 / 阴影 / 圆角）——
|
||
* 空状态直接以文字提示呈现，背景透明、共用页面底色。
|
||
*/
|
||
defineProps({
|
||
text: { type: String, default: "暂无内容" },
|
||
icon: { type: String, default: "info" },
|
||
showIcon: { type: Boolean, default: true },
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view class="mt-[26px] mx-[14px] px-5 py-[54px] text-center">
|
||
<!-- ⚠️ 组件宿主节点是行内盒，图标根节点却是 display:block 的定宽块 →
|
||
直接放 text-center 里不会居中（会贴左）。用 flex 容器托管才能可靠居中。 -->
|
||
<view v-if="showIcon" class="flex justify-center">
|
||
<AppIcon :name="icon" tone="ink3" :size="34" />
|
||
</view>
|
||
<view class="mt-3 text-[13px] text-ink3">{{ text }}</view>
|
||
<slot />
|
||
</view>
|
||
</template>
|