61 lines
1.9 KiB
Vue
61 lines
1.9 KiB
Vue
<script setup>
|
|
/**
|
|
* 全局空态（方案 B · 插画文件夹）
|
|
* 用法：
|
|
* <mp-empty title="暂无产品分类" description="可先新增一个顶级分类" action-text="新增分类" @action="goAdd" />
|
|
* <mp-empty title="暂无线索" />
|
|
* <mp-empty compact title="暂无跟进" />
|
|
*/
|
|
defineProps({
|
|
/** 主文案 */
|
|
title: { type: String, default: '暂无数据' },
|
|
/** 辅助说明，可选 */
|
|
description: { type: String, default: '' },
|
|
/** 主按钮文案；空则不展示按钮 */
|
|
actionText: { type: String, default: '' },
|
|
/** 次要按钮文案，可选 */
|
|
secondaryText: { type: String, default: '' },
|
|
/** 详情内嵌等紧凑场景 */
|
|
compact: { type: Boolean, default: false }
|
|
})
|
|
|
|
const emit = defineEmits(['action', 'secondary'])
|
|
</script>
|
|
|
|
<template>
|
|
<view class="mp-empty" :class="{ 'mp-empty--compact': compact }">
|
|
<view class="mp-empty__art" aria-hidden="true">
|
|
<view class="mp-empty__shadow" />
|
|
<view class="mp-empty__folder">
|
|
<view class="mp-empty__folder-tab" />
|
|
<view class="mp-empty__folder-back" />
|
|
<view class="mp-empty__folder-front">
|
|
<view class="mp-empty__lines">
|
|
<view class="mp-empty__line" />
|
|
<view class="mp-empty__line mp-empty__line--mid" />
|
|
<view class="mp-empty__line mp-empty__line--short" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<text class="mp-empty__title">{{ title }}</text>
|
|
<text v-if="description" class="mp-empty__desc">{{ description }}</text>
|
|
<view v-if="actionText || secondaryText" class="mp-empty__actions">
|
|
<view
|
|
v-if="secondaryText"
|
|
class="mp-btn mp-btn--ghost"
|
|
@click="emit('secondary')"
|
|
>
|
|
{{ secondaryText }}
|
|
</view>
|
|
<view
|
|
v-if="actionText"
|
|
class="mp-btn mp-btn--primary"
|
|
@click="emit('action')"
|
|
>
|
|
{{ actionText }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|