|
|
|
|
@ -2,7 +2,6 @@
|
|
|
|
|
import { computed, ref, unref, watch } from 'vue' |
|
|
|
|
import { Avatar, List, Tag, Typography } from 'ant-design-vue' |
|
|
|
|
import type { ListItem } from './data' |
|
|
|
|
import { useDesign } from '@/hooks/web/useDesign' |
|
|
|
|
import { isNumber } from '@/utils/is' |
|
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
|
@ -31,7 +30,6 @@ const props = defineProps({
|
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
const emit = defineEmits(['update:currentPage']) |
|
|
|
|
const { prefixCls } = useDesign('header-notify-list') |
|
|
|
|
const current = ref(props.currentPage || 1) |
|
|
|
|
const getData = computed(() => { |
|
|
|
|
const { pageSize, list } = props |
|
|
|
|
@ -72,12 +70,12 @@ function handleTitleClick(item: ListItem) {
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<List :class="prefixCls" bordered :pagination="getPagination"> |
|
|
|
|
<List class="display-none" bordered :pagination="getPagination"> |
|
|
|
|
<template v-for="item in getData" :key="item.id"> |
|
|
|
|
<List.Item class="list-item"> |
|
|
|
|
<List.Item class="cursor-pointer overflow-hidden p-1.5 transition-all delay-300"> |
|
|
|
|
<List.Item.Meta> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="mb-2 font-normal"> |
|
|
|
|
<Typography.Paragraph |
|
|
|
|
style="width: 100%; margin-bottom: 0 !important" |
|
|
|
|
:style="{ cursor: isTitleClickable ? 'pointer' : '' }" |
|
|
|
|
@ -86,8 +84,8 @@ function handleTitleClick(item: ListItem) {
|
|
|
|
|
:content="item.title" |
|
|
|
|
@click="handleTitleClick(item)" |
|
|
|
|
/> |
|
|
|
|
<div v-if="item.extra" class="extra"> |
|
|
|
|
<Tag class="tag" :color="item.color"> |
|
|
|
|
<div v-if="item.extra" class="float-right mr-0 font-normal -mt-0.375"> |
|
|
|
|
<Tag class="mr-0" :color="item.color"> |
|
|
|
|
{{ item.extra }} |
|
|
|
|
</Tag> |
|
|
|
|
</div> |
|
|
|
|
@ -95,20 +93,20 @@ function handleTitleClick(item: ListItem) {
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #avatar> |
|
|
|
|
<Avatar v-if="item.avatar" class="avatar" :src="item.avatar" /> |
|
|
|
|
<Avatar v-if="item.avatar" class="mt-1" :src="item.avatar" /> |
|
|
|
|
<span v-else> {{ item.avatar }}</span> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #description> |
|
|
|
|
<div> |
|
|
|
|
<div v-if="item.description" class="description"> |
|
|
|
|
<div v-if="item.description" class="text-xs/18"> |
|
|
|
|
<Typography.Paragraph |
|
|
|
|
style="width: 100%; margin-bottom: 0 !important" |
|
|
|
|
:ellipsis="$props.descRows && $props.descRows > 0 ? { rows: $props.descRows, tooltip: !!item.description } : false" |
|
|
|
|
:content="item.description" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div class="datetime"> |
|
|
|
|
<div class="mt-1 text-xs/18"> |
|
|
|
|
{{ item.datetime }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -118,55 +116,3 @@ function handleTitleClick(item: ListItem) {
|
|
|
|
|
</template> |
|
|
|
|
</List> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
@prefix-cls: ~'@{namespace}-header-notify-list'; |
|
|
|
|
|
|
|
|
|
.@{prefix-cls} { |
|
|
|
|
&::-webkit-scrollbar { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep(.ant-pagination-disabled) { |
|
|
|
|
display: inline-block !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&-item { |
|
|
|
|
padding: 6px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
cursor: pointer; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
margin-bottom: 8px; |
|
|
|
|
font-weight: normal; |
|
|
|
|
|
|
|
|
|
.extra { |
|
|
|
|
float: right; |
|
|
|
|
margin-top: -1.5px; |
|
|
|
|
margin-right: 0; |
|
|
|
|
font-weight: normal; |
|
|
|
|
|
|
|
|
|
.tag { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.avatar { |
|
|
|
|
margin-top: 4px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.description { |
|
|
|
|
font-size: 12px; |
|
|
|
|
line-height: 18px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.datetime { |
|
|
|
|
margin-top: 4px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
line-height: 18px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
xingyu
2 years ago