add: AvatarList

src/components/AvatarList/README.md

@@ -0,0 +1,80 @@
+# AvatarList
+
+## 引用方法
+
+- 全局注册
+
+``` js
+// main.js
+import AvatarList from "./components/AvatarList/index";
+
+Vue.use(AvatarList);
+```
+
+- 或者局部引用
+
+``` js
+// XXX.vue
+import { AvatarList, AvatarListItem } from "../../components/AvatarList/index";
+
+export default {
+  components: {
+    AvatarList,
+    AvatarListItem
+  }
+};
+```
+
+## 使用方发
+
+``` vue
+<template>
+  <avatar-list
+    size="large"
+    :maxLength="3"
+    :excessItemsStyle="{ color: '#f56a00', backgroundColor: '#fde3cf' }"
+  >
+    <avatar-list-item
+      tips="Jake"
+      src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
+    ></avatar-list-item>
+    <avatar-list-item
+      tips="Andy"
+      src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
+    ></avatar-list-item>
+    <avatar-list-item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    ></avatar-list-item>
+    <avatar-list-item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    ></avatar-list-item>
+    <avatar-list-item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    ></avatar-list-item>
+    <avatar-list-item
+      tips="Niko"
+      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
+    ></avatar-list-item>
+  </avatar-list>
+</template>
+```
+
+## API
+
+### AvatarList
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | ---| --- |
+| size | 头像大小 | number 或者 e m (large、small 、mini, default) | default |
+| maxLength | 要显示的最大项目 | number | 0 |
+| excessItemsStyle | 多余的项目风格 | Object | null |
+
+### AvatarListItem
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | ---| --- |
+| tips | 头像展示文案 | string | - |
+| src | 头像图片连接 | string | - |

src/components/AvatarList/index.js

@@ -0,0 +1,11 @@
+import AvatarList from "./list.vue";
+import AvatarListItem from "./item.vue";
+
+const install = function(Vue) {
+  Vue.component(AvatarList.name, AvatarList);
+  Vue.component(AvatarListItem.name, AvatarListItem);
+};
+const Avatars = { AvatarList, AvatarListItem, install };
+
+export default Avatars;
+export { AvatarList, AvatarListItem, install };

src/components/AvatarList/item.vue

@@ -0,0 +1,41 @@
+<template>
+  <a-tooltip :title="tips">
+    <a-avatar :size="itemSize" :src="src" :style="excessItemsStyle">
+      <slot></slot>
+    </a-avatar>
+  </a-tooltip>
+</template>
+
+<script>
+export default {
+  name: "AvatarListItem",
+  props: {
+    size: {
+      type: [String, Number],
+      default: ""
+    },
+    tips: {
+      type: String,
+      default: ""
+    },
+    src: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      itemSize: this.size || this.$parent.size || "default",
+      excessItemsStyle: this.$parent.excessItemsStyle || null
+    };
+  },
+  watch: {
+    "$parent.size"(val) {
+      this.itemSize = val;
+    },
+    "$parent.excessItemsStyle"(val) {
+      this.excessItemsStyle = val;
+    }
+  }
+};
+</script>

src/components/AvatarList/list.vue

@@ -0,0 +1,62 @@
+<script>
+import AvatarListItem from "./item";
+
+export default {
+  name: "AvatarList",
+  components: {
+    AvatarListItem
+  },
+  props: {
+    size: {
+      type: [String, Number],
+      default: "default"
+    },
+    maxLength: {
+      type: Number,
+      default: 0
+    },
+    excessItemsStyle: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  render(h) {
+    const list = this.$slots.default;
+    let items;
+    if (this.maxLength > 0 && this.maxLength < list.length) {
+      items = list.slice(0, this.maxLength);
+      items.push(h("avatar-list-item", "+" + this.maxLength));
+    } else {
+      items = list;
+    }
+
+    return h(
+      "ul",
+      { class: "avatar-list" },
+      items.map(item => {
+        return h("li", { class: "avatar-list-item" }, [item]);
+      })
+    );
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.avatar-list {
+  display: inline-block;
+  padding: 0;
+  margin: 0 0 0 8px;
+  font-size: 0;
+  list-style: none;
+  .avatar-list-item {
+    display: inline-block;
+    margin-left: -8px;
+    .ant-avatar {
+      border: 1px solid #fff;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/main.js

@@ -20,7 +20,9 @@ import {
   Select,
   LocaleProvider,
   Dropdown,
-  DatePicker
+  DatePicker,
+  Avatar,
+  tooltip
 } from "ant-design-vue";
 import Authorized from "./components/Authorized";
 import Auth from "./directives/auth";
@@ -40,6 +42,8 @@ Vue.use(Select);
 Vue.use(LocaleProvider);
 Vue.use(Dropdown);
 Vue.use(DatePicker);
+Vue.use(Avatar);
+Vue.use(tooltip);
 Vue.component("Authorized", Authorized);
 Vue.use(Auth);
 Vue.use(VueI18n);