效果如下图在线预览APIsAvatar参数说明类型默认值color头像的背景色string‘rgba(0, 0, 0, 0.25)’shape指定头像的形状‘circle’ | ‘square’‘circle’size设置头像的大小number类型时单位pxnumber | ‘small’ | ‘middle’ | ‘large’ | Responsive‘middle’src图片类头像资源地址stringundefinedalt图片无法显示时的替代文本stringundefinedicon设置头像的图标VNode | slotundefinedhref点击跳转的地址指定此属性按钮的行为和a链接一致stringundefinedtarget相当于a标签的target属性href存在时生效‘self’ | ‘_blank’‘self’Responsive Type名称说明类型默认值xs576px响应式栅格numberundefinedsm≥576px响应式栅格numberundefinedmd≥768px响应式栅格numberundefinedlg≥992px响应式栅格numberundefinedxl≥1200px响应式栅格numberundefinedxxl≥1600px响应式栅格numberundefinedSlots名称说明类型default字符类型的头像内容v-slot:defaulticon自定义头像图标v-slot:icon创建头像组件Avatar.vue其中引入使用了以下工具函数事件监听 useEventListener监听插槽存在 useSlotsExistscript setup langtsimport{ref,computed}fromvueimporttype{VNode,Slot}fromvueimport{useEventListener,useSlotsExist}fromcomponents/utilsexportinterfaceResponsive{xs?:number// 576px 响应式栅格sm?:number// ≥576px 响应式栅格md?:number// ≥768px 响应式栅格lg?:number// ≥992px 响应式栅格xl?:number// ≥1200px 响应式栅格xxl?:number// ≥1600px 响应式栅格}exportinterfaceProps{color?:string// 头像的背景色shape?:circle|square// 指定头像的形状size?:number|small|middle|large|Responsive// 设置头像的大小number 类型时单位 pxsrc?:string// 图片类头像资源地址alt?:string// 图片无法显示时的替代文本icon?:VNode|Slot// 设置头像的图标href?:string// 点击跳转的地址指定此属性按钮的行为和 a 链接一致target?:_self|_blank// 相当于 a 标签的 target 属性href 存在时生效}constpropswithDefaults(definePropsProps(),{color:rgba(0, 0, 0, 0.25),shape:circle,size:middle,src:undefined,alt:undefined,icon:undefined,href:undefined,target:_self})constviewportWidthrefnumber(window.innerWidth)constslotsExistuseSlotsExist([default,icon])constshowIconcomputed((){if(!props.src){returnBoolean(slotsExist.icon||props.icon)}returnfalse})constavatarStylecomputed((){if(typeofprops.sizenumber){if(showIcon.value){return{backgroundColor:props.color,width:${props.size}px,height:${props.size}px,lineHeight:${props.size}px,fontSize:${props.size/2}px}}else{return{backgroundColor:props.color,width:${props.size}px,height:${props.size}px,lineHeight:${props.size}px,fontSize:18px}}}if(typeofprops.sizeobject){letsize32if(viewportWidth.value1600props.size.xxl!undefined){sizeprops.size.xxl}elseif(viewportWidth.value1200props.size.xl!undefined){sizeprops.size.xl}elseif(viewportWidth.value992props.size.lg!undefined){sizeprops.size.lg}elseif(viewportWidth.value768props.size.md!undefined){sizeprops.size.md}elseif(viewportWidth.value576props.size.sm!undefined){sizeprops.size.sm}elseif(viewportWidth.value576props.size.xs!undefined){sizeprops.size.xs}return{backgroundColor:props.color,width:${size}px,height:${size}px,lineHeight:${size}px,fontSize:${size/2}px}}return{backgroundColor:props.color}})constshowStrcomputed((){if(!props.src!showIcon.value){returnslotsExist.default}returnfalse})conststrStylecomputed((){if(typeofprops.sizestring){return{transform:scale(1) translateX(-50%)}}if(typeofprops.sizenumber){constscaleMath.min(1,Math.max(1/45,(1(props.size-9)*1)/45))return{lineHeight:${props.size}px,transform:scale(${scale}) translateX(-50%)}}return{}})useEventListener(window,resize,getViewportWidth)functiongetViewportWidth():void{viewportWidth.valuewindow.innerWidth}/scripttemplatecomponent:ishref ? a : divclassavatar-wrap:class[avatar-${shape},{[avatar-${size}]:typeofsizestring[small,middle,large].includes(size),avatar-image:src,avatar-link:href}]:styleavatarStyle:hrefhref:targettargetimg v-ifsrcclassimage-item:srcsrc:altalt/slot v-if!src showIconnameiconcomponent:isicon//slotspan v-ifshowStrclassstring-item:stylestrStyleslot/slot/span/component/templatestyle langlessscoped.avatar-wrap{position:relative;display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;font-size:14px;color:#fff;line-height:30px;border:1px solid transparent;overflow:hidden;white-space:nowrap;vertical-align:middle;cursor:auto;outline:none;:hover{color:#fff;}.avatar-square{border-radius:6px;}.image-item{display:block;width:100%;height:100%;object-fit:cover;}:deep(svg){width:1em;height:1em;fill:currentColor;}.string-item{position:absolute;left:50%;transform-origin:0center;}}.avatar-small{font-size:14px;width:24px;height:24px;line-height:22px;border-radius:50%;.avatar-icon{font-size:14px;}.avatar-square{border-radius:4px;}}.avatar-middle{.avatar-icon{font-size:18px;}}.avatar-large{font-size:24px;width:40px;height:40px;line-height:38px;border-radius:50%;.avatar-icon{font-size:24px;}.avatar-square{border-radius:8px;}}.avatar-image{background:transparent;}.avatar-link{cursor:pointer;}/style在要使用的页面引入其中引入使用了以下组件Vue3间距SpaceVue3徽标数Badgescript setup langtsimportAvatarfrom./Avatar.vueimport{ref,h}fromvueimport{UserOutlined,TeamOutlined,SketchOutlined}fromant-design/icons-vueconstcolorref(#87d068)/scripttemplatedivh1{{$route.name}}{{$route.meta.title}}/h1h2classmt30 mb10基本使用/h2Space verticalSpace aligncenterAvatar:size64template #iconUserOutlined//template/AvatarAvatar sizelargetemplate #iconUserOutlined//template/AvatarAvatartemplate #iconUserOutlined//template/AvatarAvatar sizesmalltemplate #iconUserOutlined//template/Avatar/SpaceSpace aligncenterAvatar shapesquare:size64template #iconUserOutlined//template/AvatarAvatar shapesquaresizelargetemplate #iconUserOutlined//template/AvatarAvatar shapesquaretemplate #iconUserOutlined//template/AvatarAvatar shapesquaresizesmalltemplate #iconUserOutlined//template/Avatar/Space/Spaceh2classmt30 mb10自定义背景色/h2SpaceAvatar color#1677fftemplate #iconUserOutlined//template/AvatarAvatar color#ff6900shapesquaretemplate #iconUserOutlined//template/AvatarAvatar:colorcolortemplate #iconUserOutlined//template/AvatarColorPicker stylewidth: 200pxv-model:valuecolor//Spaceh2classmt30 mb10自定义图标类型/h2Space aligncenterAvatar:icon() h(TeamOutlined)/Avatartemplate #iconUserOutlined//template/AvatarAvatarU/AvatarAvatar:size40USER/AvatarAvatar:size40srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg/Avatar stylecolor: #f56a00; background-color: #fde3cfU/Avatar/Spaceh2classmt30 mb10带徽标的头像/h2SpaceBadge:value1Avatar shapesquaretemplate #iconUserOutlined//template/Avatar/BadgeBadge dotAvatar shapesquaretemplate #iconUserOutlined//template/Avatar/Badge/Spaceh2classmt30 mb10响应式尺寸/h2Avatar:size{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }template #iconSketchOutlined//template/Avatarh2classmt30 mb10链接跳转/h2Tooltip tooltipGitHubthemusecatcherAvatar:size36srchttps://github.com/themusecatcher.pnghrefhttps://github.com/themusecatchertarget_blank//Tooltip/div/template