fix(component): 修复CoiEmpty组件图标显示问题
- 移除动态组件引用,直接使用icon-park-outline图标组件 - 优化图标显示逻辑,根据不同类型显示对应图标 - 移除actionIcon属性,简化组件接口 - 确保图标在模板中正确渲染
This commit is contained in:
parent
aaf0338f1c
commit
2678b5e358
@ -5,7 +5,12 @@
|
||||
<div class="coi-empty__icon-wrapper">
|
||||
<div class="coi-empty__icon-bg" />
|
||||
<NIcon class="coi-empty__icon" :size="iconSize" :color="iconColor">
|
||||
<component :is="iconComponent" />
|
||||
<icon-park-outline:inbox v-if="currentType === 'default'" />
|
||||
<icon-park-outline:search v-else-if="currentType === 'search'" />
|
||||
<icon-park-outline:folder-close v-else-if="currentType === 'network'" />
|
||||
<icon-park-outline:lock v-else-if="currentType === 'permission'" />
|
||||
<icon-park-outline:folder-close v-else-if="currentType === 'custom'" />
|
||||
<icon-park-outline:inbox v-else />
|
||||
</NIcon>
|
||||
</div>
|
||||
|
||||
@ -30,9 +35,10 @@
|
||||
class="coi-empty__action-btn"
|
||||
@click="handleAction"
|
||||
>
|
||||
<template v-if="actionIcon" #icon>
|
||||
<template #icon>
|
||||
<NIcon class="coi-empty__action-icon">
|
||||
<component :is="actionIconComponent" />
|
||||
<icon-park-outline:refresh v-if="currentType === 'search'" />
|
||||
<icon-park-outline:plus v-else />
|
||||
</NIcon>
|
||||
</template>
|
||||
{{ actionText }}
|
||||
@ -65,7 +71,6 @@ export interface CoiEmptyProps {
|
||||
actionText?: string
|
||||
actionType?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'
|
||||
actionSize?: 'tiny' | 'small' | 'medium' | 'large'
|
||||
actionIcon?: any
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
}
|
||||
|
||||
@ -84,7 +89,6 @@ const props = withDefaults(defineProps<CoiEmptyProps>(), {
|
||||
actionText: '',
|
||||
actionType: 'primary',
|
||||
actionSize: 'medium',
|
||||
actionIcon: undefined,
|
||||
size: 'medium',
|
||||
})
|
||||
|
||||
@ -95,37 +99,27 @@ const typeConfigs = {
|
||||
default: {
|
||||
title: '暂无数据',
|
||||
description: '当前没有可显示的数据',
|
||||
icon: 'icon-park-outline:inbox',
|
||||
},
|
||||
search: {
|
||||
title: '搜索无结果',
|
||||
description: '未找到符合条件的数据,请尝试调整搜索条件',
|
||||
icon: 'icon-park-outline:search',
|
||||
},
|
||||
network: {
|
||||
title: '网络异常',
|
||||
description: '网络连接出现问题,请检查网络连接后重试',
|
||||
icon: 'icon-park-outline:wifi-error',
|
||||
},
|
||||
permission: {
|
||||
title: '暂无权限',
|
||||
description: '您没有访问此内容的权限,请联系管理员',
|
||||
icon: 'icon-park-outline:lock',
|
||||
},
|
||||
custom: {
|
||||
title: '自定义状态',
|
||||
description: '这是一个自定义的空状态',
|
||||
icon: 'icon-park-outline:folder-close',
|
||||
},
|
||||
}
|
||||
|
||||
// 计算图标组件
|
||||
const iconComponent = computed(() => {
|
||||
if (props.icon) {
|
||||
return props.icon
|
||||
}
|
||||
return typeConfigs[props.type].icon
|
||||
})
|
||||
// 当前类型
|
||||
const currentType = computed(() => props.type)
|
||||
|
||||
// 计算标题
|
||||
const title = computed(() => {
|
||||
@ -170,17 +164,6 @@ const actionButtonSize = computed(() => {
|
||||
return sizeMap[props.size] as any
|
||||
})
|
||||
|
||||
const actionIconComponent = computed(() => {
|
||||
if (props.actionIcon) {
|
||||
return props.actionIcon
|
||||
}
|
||||
// 如果没有传入操作图标,根据类型返回默认图标
|
||||
if (props.type === 'search') {
|
||||
return 'icon-park-outline:refresh'
|
||||
}
|
||||
return 'icon-park-outline:plus'
|
||||
})
|
||||
|
||||
// 处理操作按钮点击
|
||||
function handleAction() {
|
||||
emit('action')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user