inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
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>