@moment-design/user-avatar-group v0.0.6

用户头像图标组组件

使用组件

安装依赖

npm install @moment-design/user-avatar-group --save

使用组件

<template>
  <UserAvatarGroup :config="config"></UserAvatarGroup>
</template>

<script setup lang="ts">
import UserAvatarGroup from '@moment-design/user-avatar-group';
import "@moment-design/user-avatar-group/dist/css/index.css";
import "@moment-design/user-avatar-group/dist/css/index.less";

const config = {
  max: 6,
  fieldNames: { name: 'name', avatar: 'avatar' },
  list: [
    {
      avatar:
        'https://img1.baidu.com/it/u=2426485654,2618557214&fm=253&fmt=auto?w=80&h=80',
      name: '林泽宇',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=500987579,2775878152&fm=253&app=138&size=w931',
      name: '苏逸飞',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=1411247269,2866844638&fm=253&app=138&size=w931',
      name: '叶婉清',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=1700500226,1005113141&fm=253&app=138&size=w931',
      name: '唐静萱',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=425610652,579984881&fm=253&app=138&size=w931',
      name: '欧阳睿泽',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=1758351609,624421516&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
      name: '端木诗涵',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=320167195,1945895376&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      name: '沈逸尘',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=2831180451,1376171740&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=450',
      name: '楚凝香',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=1224989404,783637058&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      name: '长孙绮梦',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=2639370331,3446389399&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=402',
      name: '许静姝',
    },
  ],
};
</script>

API

Props