import{o as a,c as n,a as s}from"./app.51e46c58.js";const t='{"title":"Avatars 头像列表","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":2,"title":"Avatars 属性","slug":"avatars-属性"},{"level":3,"title":"data","slug":"data"}],"relativePath":"components/avatars.md","lastUpdated":1721205967753}',p={},o=s('

Avatars 头像列表

展示多个头像集合

Avatars 组件位于 src/components/Avatars 内

用法

<script lang="ts" setup>\nimport { Avatars } from '@/components/Avatars'\n\nconst data = ref<AvatarItem[]>([\n  {\n    name: 'Lily',\n    url: 'https://avatars.githubusercontent.com/u/3459374?v=4'\n  },\n  {\n    name: 'Amanda',\n    url: 'https://avatars.githubusercontent.com/u/3459375?v=4'\n  },\n  {\n    name: 'Daisy',\n    url: 'https://avatars.githubusercontent.com/u/3459376?v=4'\n  },\n  {\n    name: 'Olivia',\n    url: 'https://avatars.githubusercontent.com/u/3459377?v=4'\n  },\n  {\n    name: 'Tina',\n    url: 'https://avatars.githubusercontent.com/u/3459378?v=4'\n  },\n  {\n    name: 'Kitty',\n    url: 'https://avatars.githubusercontent.com/u/3459323?v=4'\n  },\n  {\n    name: 'Helen',\n    url: 'https://avatars.githubusercontent.com/u/3459324?v=4'\n  },\n  {\n    name: 'Sophia',\n    url: 'https://avatars.githubusercontent.com/u/3459325?v=4'\n  },\n  {\n    name: 'Wendy',\n    url: 'https://avatars.githubusercontent.com/u/3459326?v=4'\n  }\n])\n</script>\n\n<template>\n  <Avatars :data="data" />\n</template>\n\n

Avatars 属性

属性说明类型可选值默认值
size头像尺寸ComponentSize、number--
max最大展示个数number-5
data头像数据，详见AvatarItem[]--
showTooltip是否展示名称tipboolean-true

data

属性说明类型可选值默认值
url头像图片地址string--
name名称，非必填string--
',9);p.render=function(s,t,p,e,c,r){return a(),n("div",null,[o])};export default p;export{t as __pageData};