43 lines
1.6 KiB
Vue
43 lines
1.6 KiB
Vue
<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>
|
|
export default {
|
|
name: 'AaEmptyPro',
|
|
props: {
|
|
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: '' }
|
|
},
|
|
computed: {
|
|
resolved: function () {
|
|
var p = {
|
|
empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },
|
|
permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },
|
|
search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },
|
|
error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }
|
|
}[this.type] || {};
|
|
return {
|
|
icon: this.icon || p.icon || '📭',
|
|
title: this.title || p.title || '暂无数据',
|
|
desc: this.desc || p.desc || ''
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style src="./EmptyPro.css"></style>
|