| commit | author | age | ||
| 9bcb19 | 1 | <!-- |
| I | 2 | <template> |
| 3 | <div :class="[prefixCls]"> | |
| 4 | <ul> | |
| 5 | <slot></slot> | |
| 6 | <template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template> | |
| 7 | ||
| 8 | <template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength"> | |
| 9 | <avatar-item :size="size"> | |
| 10 | <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar> | |
| 11 | </avatar-item> | |
| 12 | </template> | |
| 13 | </ul> | |
| 14 | </div> | |
| 15 | </template> | |
| 16 | --> | |
| 17 | ||
| 18 | <script> | |
| 19 | import Avatar from 'ant-design-vue/es/avatar' | |
| 20 | import AvatarItem from './Item' | |
| 21 | import { filterEmpty } from '@/components/_util/util' | |
| 22 | ||
| 23 | export default { | |
| 24 | AvatarItem, | |
| 25 | name: 'AvatarList', | |
| 26 | components: { | |
| 27 | Avatar, | |
| 28 | AvatarItem | |
| 29 | }, | |
| 30 | props: { | |
| 31 | prefixCls: { | |
| 32 | type: String, | |
| 33 | default: 'ant-pro-avatar-list' | |
| 34 | }, | |
| 35 | /** | |
| 36 | * 头像大小 类型: large、small 、mini, default | |
| 37 | * 默认值: default | |
| 38 | */ | |
| 39 | size: { | |
| 40 | type: [String, Number], | |
| 41 | default: 'default' | |
| 42 | }, | |
| 43 | /** | |
| 44 | * 要显示的最大项目 | |
| 45 | */ | |
| 46 | maxLength: { | |
| 47 | type: Number, | |
| 48 | default: 0 | |
| 49 | }, | |
| 50 | /** | |
| 51 | * 多余的项目风格 | |
| 52 | */ | |
| 53 | excessItemsStyle: { | |
| 54 | type: Object, | |
| 55 | default: () => { | |
| 56 | return { | |
| 57 | color: '#f56a00', | |
| 58 | backgroundColor: '#fde3cf' | |
| 59 | } | |
| 60 | } | |
| 61 | } | |
| 62 | }, | |
| 63 | data () { | |
| 64 | return {} | |
| 65 | }, | |
| 66 | methods: { | |
| 67 | getItems (items) { | |
| 68 | const classString = { | |
| 69 | [`${this.prefixCls}-item`]: true, | |
| 70 | [`${this.size}`]: true | |
| 71 | } | |
| 72 | ||
| 73 | if (this.maxLength > 0) { | |
| 74 | items = items.slice(0, this.maxLength) | |
| 75 | items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>)) | |
| 76 | } | |
| 77 | const itemList = items.map((item) => ( | |
| 78 | <li class={ classString }>{ item }</li> | |
| 79 | )) | |
| 80 | return itemList | |
| 81 | } | |
| 82 | }, | |
| 83 | render () { | |
| 84 | const { prefixCls, size } = this.$props | |
| 85 | const classString = { | |
| 86 | [`${prefixCls}`]: true, | |
| 87 | [`${size}`]: true | |
| 88 | } | |
| 89 | const items = filterEmpty(this.$slots.default) | |
| 90 | const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{ this.getItems(items) }</ul> : null | |
| 91 | ||
| 92 | return ( | |
| 93 | <div class={ classString }> | |
| 94 | { itemsDom } | |
| 95 | </div> | |
| 96 | ) | |
| 97 | } | |
| 98 | } | |
| 99 | </script> | |
