| 提交 | 用户 | age | ||
| 7a1e94 | 1 | <template> |
| 012020 | 2 | <a-list :class="prefixCls" bordered :pagination="getPagination"> |
| c16be2 | 3 | <template v-for="item in getData" :key="item.id"> |
| ba068b | 4 | <a-list-item class="list-item"> |
| V | 5 | <a-list-item-meta> |
| 7a1e94 | 6 | <template #title> |
| C | 7 | <div class="title"> |
| c16be2 | 8 | <a-typography-paragraph |
| 无 | 9 | @click="handleTitleClick(item)" |
| aeebfc | 10 | style="width: 100%; margin-bottom: 0 !important" |
| c16be2 | 11 | :style="{ cursor: isTitleClickable ? 'pointer' : '' }" |
| 无 | 12 | :delete="!!item.titleDelete" |
| 13 | :ellipsis=" | |
| 61d853 | 14 | $props.titleRows && $props.titleRows > 0 |
| 无 | 15 | ? { rows: $props.titleRows, tooltip: !!item.title } |
| 16 | : false | |
| c16be2 | 17 | " |
| 无 | 18 | :content="item.title" |
| 19 | /> | |
| 7a1e94 | 20 | <div class="extra" v-if="item.extra"> |
| ba068b | 21 | <a-tag class="tag" :color="item.color"> |
| 7a1e94 | 22 | {{ item.extra }} |
| ba068b | 23 | </a-tag> |
| 7a1e94 | 24 | </div> |
| C | 25 | </div> |
| 26 | </template> | |
| ba068b | 27 | |
| 7a1e94 | 28 | <template #avatar> |
| ba068b | 29 | <a-avatar v-if="item.avatar" class="avatar" :src="item.avatar" /> |
| 7a1e94 | 30 | <span v-else> {{ item.avatar }}</span> |
| C | 31 | </template> |
| ba068b | 32 | |
| 7a1e94 | 33 | <template #description> |
| C | 34 | <div> |
| c16be2 | 35 | <div class="description" v-if="item.description"> |
| 无 | 36 | <a-typography-paragraph |
| aeebfc | 37 | style="width: 100%; margin-bottom: 0 !important" |
| c16be2 | 38 | :ellipsis=" |
| 61d853 | 39 | $props.descRows && $props.descRows > 0 |
| 无 | 40 | ? { rows: $props.descRows, tooltip: !!item.description } |
| c16be2 | 41 | : false |
| 无 | 42 | " |
| 43 | :content="item.description" | |
| 44 | /> | |
| 9edc28 | 45 | </div> |
| V | 46 | <div class="datetime"> |
| 47 | {{ item.datetime }} | |
| 48 | </div> | |
| 7a1e94 | 49 | </div> |
| C | 50 | </template> |
| ba068b | 51 | </a-list-item-meta> |
| V | 52 | </a-list-item> |
| 7a1e94 | 53 | </template> |
| ba068b | 54 | </a-list> |
| 7a1e94 | 55 | </template> |
| C | 56 | <script lang="ts"> |
| c16be2 | 57 | import { computed, defineComponent, PropType, ref, watch, unref } from 'vue'; |
| 7a1e94 | 58 | import { ListItem } from './data'; |
| a65ad9 | 59 | import { useDesign } from '/@/hooks/web/useDesign'; |
| c16be2 | 60 | import { List, Avatar, Tag, Typography } from 'ant-design-vue'; |
| 无 | 61 | import { isNumber } from '/@/utils/is'; |
| 7a1e94 | 62 | export default defineComponent({ |
| 6392b7 | 63 | components: { |
| V | 64 | [Avatar.name]: Avatar, |
| 65 | [List.name]: List, | |
| 66 | [List.Item.name]: List.Item, | |
| 67 | AListItemMeta: List.Item.Meta, | |
| c16be2 | 68 | ATypographyParagraph: Typography.Paragraph, |
| 6392b7 | 69 | [Tag.name]: Tag, |
| V | 70 | }, |
| 7a1e94 | 71 | props: { |
| C | 72 | list: { |
| 73c8e0 | 73 | type: Array as PropType<ListItem[]>, |
| 7a1e94 | 74 | default: () => [], |
| C | 75 | }, |
| c16be2 | 76 | pageSize: { |
| 无 | 77 | type: [Boolean, Number] as PropType<Boolean | Number>, |
| 78 | default: 5, | |
| 79 | }, | |
| 80 | currentPage: { | |
| 81 | type: Number, | |
| 82 | default: 1, | |
| 83 | }, | |
| 84 | titleRows: { | |
| 85 | type: Number, | |
| 86 | default: 1, | |
| 87 | }, | |
| 88 | descRows: { | |
| 89 | type: Number, | |
| 90 | default: 2, | |
| 91 | }, | |
| 92 | onTitleClick: { | |
| 93 | type: Function as PropType<(Recordable) => void>, | |
| 94 | }, | |
| 7a1e94 | 95 | }, |
| c16be2 | 96 | emits: ['update:currentPage'], |
| 无 | 97 | setup(props, { emit }) { |
| a65ad9 | 98 | const { prefixCls } = useDesign('header-notify-list'); |
| c16be2 | 99 | const current = ref(props.currentPage || 1); |
| 无 | 100 | const getData = computed(() => { |
| 101 | const { pageSize, list } = props; | |
| 102 | if (pageSize === false) return []; | |
| 103 | let size = isNumber(pageSize) ? pageSize : 5; | |
| 104 | return list.slice(size * (unref(current) - 1), size * unref(current)); | |
| 105 | }); | |
| 106 | watch( | |
| 107 | () => props.currentPage, | |
| 108 | (v) => { | |
| 109 | current.value = v; | |
| 56a966 | 110 | }, |
| c16be2 | 111 | ); |
| 无 | 112 | const isTitleClickable = computed(() => !!props.onTitleClick); |
| 113 | const getPagination = computed(() => { | |
| 114 | const { list, pageSize } = props; | |
| 115 | if (pageSize > 0 && list && list.length > pageSize) { | |
| 116 | return { | |
| 117 | total: list.length, | |
| 118 | pageSize, | |
| 012020 | 119 | //size: 'small', |
| c16be2 | 120 | current: unref(current), |
| 无 | 121 | onChange(page) { |
| 122 | current.value = page; | |
| 123 | emit('update:currentPage', page); | |
| 124 | }, | |
| 125 | }; | |
| 126 | } else { | |
| 127 | return false; | |
| 128 | } | |
| 129 | }); | |
| 130 | ||
| 131 | function handleTitleClick(item: ListItem) { | |
| 132 | props.onTitleClick && props.onTitleClick(item); | |
| 133 | } | |
| 134 | ||
| 135 | return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable }; | |
| a65ad9 | 136 | }, |
| 7a1e94 | 137 | }); |
| C | 138 | </script> |
| 139 | <style lang="less" scoped> | |
| a65ad9 | 140 | @prefix-cls: ~'@{namespace}-header-notify-list'; |
| V | 141 | |
| 142 | .@{prefix-cls} { | |
| 7a1e94 | 143 | &::-webkit-scrollbar { |
| C | 144 | display: none; |
| 145 | } | |
| 146 | ||
| 012020 | 147 | ::v-deep(.ant-pagination-disabled) { |
| 无 | 148 | display: inline-block !important; |
| 149 | } | |
| 150 | ||
| ba068b | 151 | &-item { |
| 7a1e94 | 152 | padding: 6px; |
| C | 153 | overflow: hidden; |
| 154 | cursor: pointer; | |
| 155 | transition: all 0.3s; | |
| 156 | ||
| 157 | .title { | |
| 158 | margin-bottom: 8px; | |
| 159 | font-weight: normal; | |
| 160 | ||
| 161 | .extra { | |
| 162 | float: right; | |
| 163 | margin-top: -1.5px; | |
| 164 | margin-right: 0; | |
| 165 | font-weight: normal; | |
| 166 | ||
| 167 | .tag { | |
| 168 | margin-right: 0; | |
| 169 | } | |
| 170 | } | |
| 171 | ||
| 172 | .avatar { | |
| 173 | margin-top: 4px; | |
| 174 | } | |
| 175 | ||
| 176 | .description { | |
| 177 | font-size: 12px; | |
| 178 | line-height: 18px; | |
| 179 | } | |
| 180 | ||
| 181 | .datetime { | |
| 182 | margin-top: 4px; | |
| 183 | font-size: 12px; | |
| 184 | line-height: 18px; | |
| 185 | } | |
| 186 | } | |
| 187 | } | |
| 188 | } | |
| 189 | </style> | |
