feat: avatar list

Author: sendya

src/components/AvatarList/Item.vue

@@ -1,26 +1,48 @@
 <template>
-  <div>
-    item
-  </div>
+  <li :class="[prefixCls, size]">
+    <slot>
+      <tooltip>
+        <template slot="title">{{ tips }}</template>
+        <avatar :size="size !== 'mini' && size || 20" :src="src" />
+      </tooltip>
+    </slot>
+  </li>
 </template>
 
 <script>
+  import Avatar from 'ant-design-vue/es/avatar'
+  import Tooltip from 'ant-design-vue/es/tooltip'
+
   export default {
     name: "AvatarItem",
+    components: {
+      Avatar,
+      Tooltip
+    },
     props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-avatar-list-item'
+      },
       tips: {
         type: String,
         default: '',
         required: false
       },
       src: {
         type: String,
-        required: true
+        default: ''
+      }
+    },
+    data () {
+      return {
+        size: this.$parent.size
+      }
+    },
+    watch: {
+      '$parent.size' (val) {
+        this.size = val
       }
     }
   }
-</script>
-
-<style scoped>
-
-</style>
+</script>

src/components/AvatarList/List.vue

@@ -1,51 +1,79 @@
 <template>
-  <div>
-
+  <div :class="[prefixCls]">
+    <ul>
+      <slot></slot>
+      <template v-if="maxLength > 0 && slotsSize > maxLength">
+        <avatar-item :size="size">
+          <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
+        </avatar-item>
+      </template>
+    </ul>
   </div>
 </template>
 
 <script>
   import Avatar from 'ant-design-vue/es/avatar'
-  import AvatarListItem from './Item'
+  import AvatarItem from './Item'
 
   export default {
+    AvatarItem,
     name: "AvatarList",
     components: {
       Avatar,
-      AvatarListItem
+      AvatarItem
     },
     props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-avatar-list'
+      },
       /**
        * 头像大小 类型: large、small 、mini, default
        * 默认值: default
        */
       size: {
-        type: String,
+        type: [String, Number],
         default: 'default'
       },
       /**
        * 要显示的最大项目
        */
       maxLength: {
         type: Number,
-        default: 3
+        default: 0
       },
       /**
-       * 额外 CSS 风格
+       * 多余的项目风格
        */
       excessItemsStyle: {
         type: Object,
-        default: () => {}
+        default: () => {
+          return {
+            color: '#f56a00',
+            backgroundColor: '#fde3cf'
+          }
+        }
       }
     },
     data () {
       return {
-
+        slotsSize: 0
+      }
+    },
+    created () {
+      this.slotsSize = this.$slots.default.length
+      this.splitSlots()
+    },
+    methods: {
+      splitSlots () {
+        if (this.maxLength !== 0 && this.slotsSize > this.maxLength) {
+          this.$slots.default = this.$slots.default.slice(0, this.maxLength)
+        }
       }
     }
   }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
 </style>

src/components/AvatarList/index.js

@@ -1,3 +1,4 @@
 import AvatarList from './List'
+import "./index.less"
 
 export default AvatarList

src/components/AvatarList/index.less

@@ -7,8 +7,10 @@
   display: inline-block;
 
   ul {
+    list-style: none;
     display: inline-block;
-    margin-left: 8px;
+    padding: 0;
+    margin: 0 0 0 8px;
     font-size: 0;
   }
 }
@@ -23,20 +25,21 @@
   :global {
     .ant-avatar {
       border: 1px solid #fff;
+      cursor: pointer;
     }
   }
 
-  .large {
+  &.large {
     width: @avatar-size-lg;
     height: @avatar-size-lg;
   }
 
-  .small {
+  &.small {
     width: @avatar-size-sm;
     height: @avatar-size-sm;
   }
 
-  .mini {
+  &.mini {
     width: 20px;
     height: 20px;
 
@@ -53,4 +56,5 @@
       }
     }
   }
-}
+}
+

src/views/Home.vue

@@ -43,20 +43,44 @@
 
     </a-card>
 
-    <a-divider> 例子 </a-divider>
+    <a-divider> AvatarList </a-divider>
 
+    <a-card>
+      <avatar-list :max-length="3">
+        <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+        <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+      </avatar-list>
+
+      <a-divider type="vertical" style="margin: 0 16px" />
+
+      <avatar-list size="mini">
+        <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+        <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+      </avatar-list>
+    </a-card>
   </div>
 </template>
 
 <script>
   // @ is an alias to /src
 
   import Trend from '@/components/Trend'
+  import AvatarList from '@/components/AvatarList'
+
+  const AvatarListItem = AvatarList.AvatarItem
 
   export default {
     name: 'Home',
     components: {
-      Trend
+      Trend,
+      AvatarList,
+      AvatarListItem
     }
   }
 </script>