41 lines
1.6 KiB
Plaintext
41 lines
1.6 KiB
Plaintext
<template>
|
|
<div class="aa-empty">
|
|
<div class="aa-empty-icon">{{ resolved.icon }}</div>
|
|
<div class="aa-empty-title">{{ resolved.title }}</div>
|
|
<div class="aa-empty-desc" v-if="resolved.desc">{{ resolved.desc }}</div>
|
|
<div class="aa-empty-actions" v-if="actionText || secondaryText">
|
|
<button v-if="actionText" class="aa-empty-btn primary" @click="emit('action')">{{ actionText }}</button>
|
|
<button v-if="secondaryText" class="aa-empty-btn" @click="emit('secondary')">{{ secondaryText }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
const props = defineProps({
|
|
type: { type: String, default: 'empty' },
|
|
icon: { type: String, default: '' },
|
|
title: { type: String, default: '' },
|
|
desc: { type: String, default: '' },
|
|
actionText: { type: String, default: '' },
|
|
secondaryText: { type: String, default: '' }
|
|
});
|
|
const emit = defineEmits(['action', 'secondary']);
|
|
|
|
const resolved = computed(() => {
|
|
const p = {
|
|
empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },
|
|
permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },
|
|
search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },
|
|
error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }
|
|
}[props.type] || {};
|
|
return {
|
|
icon: props.icon || p.icon || '📭',
|
|
title: props.title || p.title || '暂无数据',
|
|
desc: props.desc || p.desc || ''
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<style src="./EmptyPro.css"></style>
|