import{d as b,_ as r,j as p,k as g,l as C,w as o,f as t,b as n,e as a,r as G,t as F,v as W,a as X,n as Y}from"./index.c1b9962e.js";import{U as y}from"./UserOutlined.f4b09e7f.js";import{A as x}from"./AntDesignOutlined.c34a2bd6.js";const V=b({components:{UserOutlined:y}});function w(u,s,i,k,d,m){const e=p("UserOutlined"),c=p("a-avatar"),l=p("demo-box");return g(),C(l,{jsfiddle:{us:"Three sizes and two shapes are available.",cn:"\u5934\u50CF\u6709\u4E09\u79CD\u5C3A\u5BF8\uFF0C\u4E24\u79CD\u5F62\u72B6\u53EF\u9009\u3002",docHtml:`

zh-CN

\u5934\u50CF\u6709\u4E09\u79CD\u5C3A\u5BF8\uFF0C\u4E24\u79CD\u5F62\u72B6\u53EF\u9009\u3002

en-US

Three sizes and two shapes are available.

`,order:0,title:{"zh-CN":"\u57FA\u672C","en-US":"Basic"},relativePath:"src/docs/avatar/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhciA6c2l6ZT0iNjQiPgogICAgPHRlbXBsYXRlICNpY29uPjxVc2VyT3V0bGluZWQgLz48L3RlbXBsYXRlPgogIDwvYS1hdmF0YXI+CiAgPGEtYXZhdGFyIHNpemU9ImxhcmdlIj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgogIDxhLWF2YXRhcj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgogIDxhLWF2YXRhciBzaXplPSJzbWFsbCI+CiAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgPC9hLWF2YXRhcj4KICA8YnIgLz4KICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgOnNpemU9IjY0Ij4KICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgogIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSI+CiAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgPC9hLWF2YXRhcj4KICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSI+CiAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgPC9hLWF2YXRhcj4KICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgc2l6ZT0ic21hbGwiPgogICAgPHRlbXBsYXRlICNpY29uPjxVc2VyT3V0bGluZWQgLz48L3RlbXBsYXRlPgogIDwvYS1hdmF0YXI+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBVc2VyT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFVzZXJPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhciA6c2l6ZT0iNjQiPgogICAgPHRlbXBsYXRlICNpY29uPjxVc2VyT3V0bGluZWQgLz48L3RlbXBsYXRlPgogIDwvYS1hdmF0YXI+CiAgPGEtYXZhdGFyIHNpemU9ImxhcmdlIj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgogIDxhLWF2YXRhcj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgogIDxhLWF2YXRhciBzaXplPSJzbWFsbCI+CiAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgPC9hLWF2YXRhcj4KICA8YnIgLz4KICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgOnNpemU9IjY0Ij4KICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgogIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSI+CiAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgPC9hLWF2YXRhcj4KICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSI+CiAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgPC9hLWF2YXRhcj4KICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgc2l6ZT0ic21hbGwiPgogICAgPHRlbXBsYXRlICNpY29uPjxVc2VyT3V0bGluZWQgLz48L3RlbXBsYXRlPgogIDwvYS1hdmF0YXI+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IFVzZXJPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXNlck91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:o(()=>[t(c,{size:64},{icon:o(()=>[t(e)]),_:1}),t(c,{size:"large"},{icon:o(()=>[t(e)]),_:1}),t(c,null,{icon:o(()=>[t(e)]),_:1}),t(c,{size:"small"},{icon:o(()=>[t(e)]),_:1}),s[0]||(s[0]=n("br",null,null,-1)),t(c,{shape:"square",size:64},{icon:o(()=>[t(e)]),_:1}),t(c,{shape:"square",size:"large"},{icon:o(()=>[t(e)]),_:1}),t(c,{shape:"square"},{icon:o(()=>[t(e)]),_:1}),t(c,{shape:"square",size:"small"},{icon:o(()=>[t(e)]),_:1})]),htmlCode:o(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},":size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("64"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("64"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:o(()=>s[2]||(s[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},":size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("64"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("64"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}var P=r(V,[["render",w]]);const j=b({components:{UserOutlined:y}});function B(u,s,i,k,d,m){const e=p("UserOutlined"),c=p("a-avatar"),l=p("demo-box");return g(),C(l,{jsfiddle:{us:"Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.",cn:"\u652F\u6301\u4E09\u79CD\u7C7B\u578B\uFF1A\u56FE\u7247\u3001Icon \u4EE5\u53CA\u5B57\u7B26\uFF0C\u5176\u4E2D Icon \u548C\u5B57\u7B26\u578B\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u989C\u8272\u53CA\u80CC\u666F\u8272\u3002",docHtml:`

zh-CN

\u652F\u6301\u4E09\u79CD\u7C7B\u578B\uFF1A\u56FE\u7247\u3001Icon \u4EE5\u53CA\u5B57\u7B26\uFF0C\u5176\u4E2D Icon \u548C\u5B57\u7B26\u578B\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u989C\u8272\u53CA\u80CC\u666F\u8272\u3002

en-US

Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.

`,order:1,title:{"zh-CN":"\u7C7B\u578B","en-US":"Type"},relativePath:"src/docs/avatar/demo/type.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhcj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgPFVzZXJPdXRsaW5lZCAvPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgogIDxhLWF2YXRhcj5VPC9hLWF2YXRhcj4KICA8YS1hdmF0YXI+VVNFUjwvYS1hdmF0YXI+CiAgPGEtYXZhdGFyIHNyYz0iaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL09EVExjanhBZnZxYnhIblZYQ1lYLnBuZyIgLz4KICA8YS1hdmF0YXIgc3R5bGU9ImNvbG9yOiAjZjU2YTAwOyBiYWNrZ3JvdW5kLWNvbG9yOiAjZmRlM2NmIj5VPC9hLWF2YXRhcj4KICA8YS1hdmF0YXIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICM4N2QwNjgiPgogICAgPHRlbXBsYXRlICNpY29uPgogICAgICA8VXNlck91dGxpbmVkIC8+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1hdmF0YXI+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBVc2VyT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFVzZXJPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhcj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgPFVzZXJPdXRsaW5lZCAvPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgogIDxhLWF2YXRhcj5VPC9hLWF2YXRhcj4KICA8YS1hdmF0YXI+VVNFUjwvYS1hdmF0YXI+CiAgPGEtYXZhdGFyIHNyYz0iaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL09EVExjanhBZnZxYnhIblZYQ1lYLnBuZyIgLz4KICA8YS1hdmF0YXIgc3R5bGU9ImNvbG9yOiAjZjU2YTAwOyBiYWNrZ3JvdW5kLWNvbG9yOiAjZmRlM2NmIj5VPC9hLWF2YXRhcj4KICA8YS1hdmF0YXIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICM4N2QwNjgiPgogICAgPHRlbXBsYXRlICNpY29uPgogICAgICA8VXNlck91dGxpbmVkIC8+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1hdmF0YXI+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IFVzZXJPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXNlck91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:o(()=>[t(c,null,{icon:o(()=>[t(e)]),_:1}),t(c,null,{default:o(()=>s[0]||(s[0]=[a("U")])),_:1,__:[0]}),t(c,null,{default:o(()=>s[1]||(s[1]=[a("USER")])),_:1,__:[1]}),t(c,{src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"}),t(c,{style:{color:"#f56a00","background-color":"#fde3cf"}},{default:o(()=>s[2]||(s[2]=[a("U")])),_:1,__:[2]}),t(c,{style:{"background-color":"#87d068"}},{icon:o(()=>[t(e)]),_:1})]),htmlCode:o(()=>s[3]||(s[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),n("span",{class:"token punctuation"},">")]),a("U"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),n("span",{class:"token punctuation"},">")]),a("USER"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" #f56a00"),n("span",{class:"token punctuation"},";"),a(),n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #fde3cf")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("U"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #87d068")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:o(()=>s[4]||(s[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),n("span",{class:"token punctuation"},">")]),a("U"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),n("span",{class:"token punctuation"},">")]),a("USER"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" #f56a00"),n("span",{class:"token punctuation"},";"),a(),n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #fde3cf")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("U"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #87d068")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}var R=r(j,[["render",B]]);const v=["U","Lucy","Tom","Edward"],A=["#f56a00","#7265e6","#ffbf00","#00a2ae"],N=b({setup(){const u=G(v[0]),s=G(A[0]);return{avatarValue:u,color:s,changeValue:()=>{const k=v.indexOf(u.value);u.value=kzh-CN

\u5BF9\u4E8E\u5B57\u7B26\u578B\u7684\u5934\u50CF\uFF0C\u5F53\u5B57\u7B26\u4E32\u8F83\u957F\u65F6\uFF0C\u5B57\u4F53\u5927\u5C0F\u53EF\u4EE5\u6839\u636E\u5934\u50CF\u5BBD\u5EA6\u81EA\u52A8\u8C03\u6574\u3002

en-US

For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.

`,order:2,title:{"zh-CN":"\u81EA\u52A8\u8C03\u6574\u5B57\u7B26\u5927\u5C0F","en-US":"Autoset Font Size"},relativePath:"src/docs/avatar/demo/dynamic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhcgogICAgc2hhcGU9InNxdWFyZSIKICAgIHNpemU9ImxhcmdlIgogICAgOnN0eWxlPSJ7IGJhY2tncm91bmRDb2xvcjogY29sb3IsIHZlcnRpY2FsQWxpZ246ICdtaWRkbGUnIH0iCiAgPgogICAge3sgYXZhdGFyVmFsdWUgfX0KICA8L2EtYXZhdGFyPgogIDxhLWJ1dHRvbgogICAgc2l6ZT0ic21hbGwiCiAgICA6c3R5bGU9InsgbWFyZ2luTGVmdDogJzE2cHgnLCB2ZXJ0aWNhbEFsaWduOiAnbWlkZGxlJyB9IgogICAgQGNsaWNrPSJjaGFuZ2VWYWx1ZSIKICA+CiAgICDmlLnlj5gKICA8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwoKY29uc3QgVXNlckxpc3QgPSBbJ1UnLCAnTHVjeScsICdUb20nLCAnRWR3YXJkJ107CmNvbnN0IGNvbG9yTGlzdCA9IFsnI2Y1NmEwMCcsICcjNzI2NWU2JywgJyNmZmJmMDAnLCAnIzAwYTJhZSddOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgYXZhdGFyVmFsdWUgPSByZWYoVXNlckxpc3RbMF0pOwogICAgY29uc3QgY29sb3IgPSByZWYoY29sb3JMaXN0WzBdKTsKICAgIGNvbnN0IGNoYW5nZVZhbHVlID0gKCkgPT4gewogICAgICBjb25zdCBpbmRleCA9IFVzZXJMaXN0LmluZGV4T2YoYXZhdGFyVmFsdWUudmFsdWUpOwogICAgICBhdmF0YXJWYWx1ZS52YWx1ZSA9IGluZGV4IDwgVXNlckxpc3QubGVuZ3RoIC0gMSA/IFVzZXJMaXN0W2luZGV4ICsgMV0gOiBVc2VyTGlzdFswXTsKICAgICAgY29sb3IudmFsdWUgPSBpbmRleCA8IGNvbG9yTGlzdC5sZW5ndGggLSAxID8gY29sb3JMaXN0W2luZGV4ICsgMV0gOiBjb2xvckxpc3RbMF07CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgYXZhdGFyVmFsdWUsCiAgICAgIGNvbG9yLAogICAgICBjaGFuZ2VWYWx1ZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhcgogICAgc2hhcGU9InNxdWFyZSIKICAgIHNpemU9ImxhcmdlIgogICAgOnN0eWxlPSJ7IGJhY2tncm91bmRDb2xvcjogY29sb3IsIHZlcnRpY2FsQWxpZ246ICdtaWRkbGUnIH0iCiAgPgogICAge3sgYXZhdGFyVmFsdWUgfX0KICA8L2EtYXZhdGFyPgogIDxhLWJ1dHRvbgogICAgc2l6ZT0ic21hbGwiCiAgICA6c3R5bGU9InsgbWFyZ2luTGVmdDogJzE2cHgnLCB2ZXJ0aWNhbEFsaWduOiAnbWlkZGxlJyB9IgogICAgQGNsaWNrPSJjaGFuZ2VWYWx1ZSIKICA+CiAgICDmlLnlj5gKICA8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmNvbnN0IFVzZXJMaXN0ID0gWydVJywgJ0x1Y3knLCAnVG9tJywgJ0Vkd2FyZCddOwpjb25zdCBjb2xvckxpc3QgPSBbJyNmNTZhMDAnLCAnIzcyNjVlNicsICcjZmZiZjAwJywgJyMwMGEyYWUnXTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGF2YXRhclZhbHVlID0gcmVmKFVzZXJMaXN0WzBdKTsKICAgIGNvbnN0IGNvbG9yID0gcmVmKGNvbG9yTGlzdFswXSk7CiAgICBjb25zdCBjaGFuZ2VWYWx1ZSA9ICgpID0+IHsKICAgICAgY29uc3QgaW5kZXggPSBVc2VyTGlzdC5pbmRleE9mKGF2YXRhclZhbHVlLnZhbHVlKTsKICAgICAgYXZhdGFyVmFsdWUudmFsdWUgPSBpbmRleCA8IFVzZXJMaXN0Lmxlbmd0aCAtIDEgPyBVc2VyTGlzdFtpbmRleCArIDFdIDogVXNlckxpc3RbMF07CiAgICAgIGNvbG9yLnZhbHVlID0gaW5kZXggPCBjb2xvckxpc3QubGVuZ3RoIC0gMSA/IGNvbG9yTGlzdFtpbmRleCArIDFdIDogY29sb3JMaXN0WzBdOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGF2YXRhclZhbHVlLAogICAgICBjb2xvciwKICAgICAgY2hhbmdlVmFsdWUsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:o(()=>[t(e,{shape:"square",size:"large",style:W({backgroundColor:u.color,verticalAlign:"middle"})},{default:o(()=>[a(F(u.avatarValue),1)]),_:1},8,["style"]),t(c,{size:"small",style:{marginLeft:"16px",verticalAlign:"middle"},onClick:u.changeValue},{default:o(()=>s[0]||(s[0]=[a(" \u6539\u53D8 ")])),_:1,__:[0]},8,["onClick"])]),htmlCode:o(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(` `),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ backgroundColor: color, verticalAlign: 'middle' }"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token punctuation"},">")]),a(` {{ avatarValue }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(` `),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ marginLeft: '16px', verticalAlign: 'middle' }"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("changeValue"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token punctuation"},">")]),a(` \u6539\u53D8 `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"const"),a(" UserList "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'U'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Lucy'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Tom'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Edward'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"const"),a(" colorList "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'#f56a00'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'#7265e6'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'#ffbf00'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'#00a2ae'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token keyword"},"const"),a(" avatarValue "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),a("UserList"),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"const"),a(" color "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),a("colorList"),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"changeValue"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token keyword"},"const"),a(" index "),n("span",{class:"token operator"},"="),a(" UserList"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),a("avatarValue"),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` avatarValue`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(" index "),n("span",{class:"token operator"},"<"),a(" UserList"),n("span",{class:"token punctuation"},"."),a("length "),n("span",{class:"token operator"},"-"),a(),n("span",{class:"token number"},"1"),a(),n("span",{class:"token operator"},"?"),a(" UserList"),n("span",{class:"token punctuation"},"["),a("index "),n("span",{class:"token operator"},"+"),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},":"),a(" UserList"),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(` color`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(" index "),n("span",{class:"token operator"},"<"),a(" colorList"),n("span",{class:"token punctuation"},"."),a("length "),n("span",{class:"token operator"},"-"),a(),n("span",{class:"token number"},"1"),a(),n("span",{class:"token operator"},"?"),a(" colorList"),n("span",{class:"token punctuation"},"["),a("index "),n("span",{class:"token operator"},"+"),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},":"),a(" colorList"),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(` avatarValue`),n("span",{class:"token punctuation"},","),a(` color`),n("span",{class:"token punctuation"},","),a(` changeValue`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:o(()=>s[2]||(s[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(` `),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ backgroundColor: color, verticalAlign: 'middle' }"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token punctuation"},">")]),a(` {{ avatarValue }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(` `),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ marginLeft: '16px', verticalAlign: 'middle' }"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("changeValue"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token punctuation"},">")]),a(` \u6539\u53D8 `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"const"),a(" UserList "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'U'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Lucy'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Tom'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Edward'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"const"),a(" colorList "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'#f56a00'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'#7265e6'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'#ffbf00'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'#00a2ae'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token keyword"},"const"),a(" avatarValue "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),a("UserList"),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"const"),a(" color "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),a("colorList"),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"changeValue"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token keyword"},"const"),a(" index "),n("span",{class:"token operator"},"="),a(" UserList"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),a("avatarValue"),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` avatarValue`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(" index "),n("span",{class:"token operator"},"<"),a(" UserList"),n("span",{class:"token punctuation"},"."),a("length "),n("span",{class:"token operator"},"-"),a(),n("span",{class:"token number"},"1"),a(),n("span",{class:"token operator"},"?"),a(" UserList"),n("span",{class:"token punctuation"},"["),a("index "),n("span",{class:"token operator"},"+"),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},":"),a(" UserList"),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(` color`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(" index "),n("span",{class:"token operator"},"<"),a(" colorList"),n("span",{class:"token punctuation"},"."),a("length "),n("span",{class:"token operator"},"-"),a(),n("span",{class:"token number"},"1"),a(),n("span",{class:"token operator"},"?"),a(" colorList"),n("span",{class:"token punctuation"},"["),a("index "),n("span",{class:"token operator"},"+"),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},":"),a(" colorList"),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(` avatarValue`),n("span",{class:"token punctuation"},","),a(` color`),n("span",{class:"token punctuation"},","),a(` changeValue`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}var z=r(N,[["render",L]]);const U=b({components:{UserOutlined:y}}),S={style:{"margin-right":"24px"}};function D(u,s,i,k,d,m){const e=p("UserOutlined"),c=p("a-avatar"),l=p("a-badge"),I=p("demo-box");return g(),C(I,{jsfiddle:{us:"Usually used for reminders and notifications.",cn:"\u901A\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3002",docHtml:`

zh-CN

\u901A\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3002

en-US

Usually used for reminders and notifications.

`,order:3,title:{"zh-CN":"\u5E26\u5FBD\u6807\u7684\u5934\u50CF","en-US":"With Badge"},relativePath:"src/docs/avatar/demo/badge.vue",sourceCode:"PHRlbXBsYXRlPgogIDxzcGFuIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDI0cHgiPgogICAgPGEtYmFkZ2UgOmNvdW50PSIxIj4KICAgICAgPGEtYXZhdGFyIHNoYXBlPSJzcXVhcmUiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgICAgPC9hLWF2YXRhcj4KICAgIDwvYS1iYWRnZT4KICA8L3NwYW4+CiAgPHNwYW4+CiAgICA8YS1iYWRnZSBkb3Q+CiAgICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgICAgIDwvYS1hdmF0YXI+CiAgICA8L2EtYmFkZ2U+CiAgPC9zcGFuPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgVXNlck91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBVc2VyT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGU+CiNjb21wb25lbnRzLWF2YXRhci1kZW1vLWJhZGdlIC5hbnQtYXZhdGFyIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1yaWdodDogMDsKfQo8L3N0eWxlPgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxzcGFuIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDI0cHgiPgogICAgPGEtYmFkZ2UgOmNvdW50PSIxIj4KICAgICAgPGEtYXZhdGFyIHNoYXBlPSJzcXVhcmUiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgICAgPC9hLWF2YXRhcj4KICAgIDwvYS1iYWRnZT4KICA8L3NwYW4+CiAgPHNwYW4+CiAgICA8YS1iYWRnZSBkb3Q+CiAgICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgICAgIDwvYS1hdmF0YXI+CiAgICA8L2EtYmFkZ2U+CiAgPC9zcGFuPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBVc2VyT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFVzZXJPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZT4KI2NvbXBvbmVudHMtYXZhdGFyLWRlbW8tYmFkZ2UgLmFudC1hdmF0YXIgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLXJpZ2h0OiAwOwp9Cjwvc3R5bGU+"}},{default:o(()=>[n("span",S,[t(l,{count:1},{default:o(()=>[t(c,{shape:"square"},{icon:o(()=>[t(e)]),_:1})]),_:1})]),n("span",null,[t(l,{dot:""},{default:o(()=>[t(c,{shape:"square"},{icon:o(()=>[t(e)]),_:1})]),_:1})])]),htmlCode:o(()=>s[0]||(s[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 24px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"dot"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(` `),n("span",{class:"token selector"},"#components-avatar-demo-badge .ant-avatar"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),a(" 0"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 0"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:o(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 24px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"dot"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(` `),n("span",{class:"token selector"},"#components-avatar-demo-badge .ant-avatar"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),a(" 0"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 0"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}var H=r(U,[["render",D]]);const _=b({components:{UserOutlined:y}});function E(u,s,i,k,d,m){const e=p("a-avatar"),c=p("UserOutlined"),l=p("a-tooltip"),I=p("a-avatar-group"),h=p("a-divider"),Z=p("demo-box");return g(),C(Z,{jsfiddle:{us:"Avatar group display.",cn:"\u5934\u50CF\u7EC4\u5408\u5C55\u73B0\u3002",docHtml:`

zh-CN

\u5934\u50CF\u7EC4\u5408\u5C55\u73B0\u3002

en-US

Avatar group display.

`,order:4,title:{"zh-CN":"Avatar.Group","en-US":"Avatar.Group"},relativePath:"src/docs/avatar/demo/group.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhci1ncm91cD4KICAgIDxhLWF2YXRhciBzcmM9Imh0dHBzOi8vem9zLmFsaXBheW9iamVjdHMuY29tL3Jtc3BvcnRhbC9PRFRMY2p4QWZ2cWJ4SG5WWENZWC5wbmciIC8+CiAgICA8YS1hdmF0YXIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmNTZhMDAiPks8L2EtYXZhdGFyPgogICAgPGEtdG9vbHRpcCB0aXRsZT0iQW50IFVzZXIiIHBsYWNlbWVudD0idG9wIj4KICAgICAgPGEtYXZhdGFyIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjODdkMDY4Ij4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgICAgIDwvYS1hdmF0YXI+CiAgICA8L2EtdG9vbHRpcD4KICAgIDxhLWF2YXRhciBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogIzE4OTBmZiI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgIDwvYS1hdmF0YXI+CiAgPC9hLWF2YXRhci1ncm91cD4KICA8YS1kaXZpZGVyIC8+CiAgPGEtYXZhdGFyLWdyb3VwIDptYXgtY291bnQ9IjIiIDptYXgtc3R5bGU9InsgY29sb3I6ICcjZjU2YTAwJywgYmFja2dyb3VuZENvbG9yOiAnI2ZkZTNjZicgfSI+CiAgICA8YS1hdmF0YXIgc3JjPSJodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvT0RUTGNqeEFmdnFieEhuVlhDWVgucG5nIiAvPgogICAgPGEtYXZhdGFyIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjMTg5MGZmIj5LPC9hLWF2YXRhcj4KICAgIDxhLXRvb2x0aXAgdGl0bGU9IkFudCBVc2VyIiBwbGFjZW1lbnQ9InRvcCI+CiAgICAgIDxhLWF2YXRhciBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogIzg3ZDA2OCI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPjxVc2VyT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgICA8L2EtYXZhdGFyPgogICAgPC9hLXRvb2x0aXA+CiAgICA8YS1hdmF0YXIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICMxODkwZmYiPgogICAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgICA8L2EtYXZhdGFyPgogIDwvYS1hdmF0YXItZ3JvdXA+CiAgPGEtZGl2aWRlciAvPgogIDxhLWF2YXRhci1ncm91cAogICAgOm1heC1jb3VudD0iMiIKICAgIHNpemU9ImxhcmdlIgogICAgOm1heC1zdHlsZT0iewogICAgICBjb2xvcjogJyNmNTZhMDAnLAogICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjZmRlM2NmJywKICAgIH0iCiAgPgogICAgPGEtYXZhdGFyIHNyYz0iaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL09EVExjanhBZnZxYnhIblZYQ1lYLnBuZyIgLz4KICAgIDxhLWF2YXRhciBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogIzE4OTBmZiI+SzwvYS1hdmF0YXI+CiAgICA8YS10b29sdGlwIHRpdGxlPSJBbnQgVXNlciIgcGxhY2VtZW50PSJ0b3AiPgogICAgICA8YS1hdmF0YXIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICM4N2QwNjgiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgICAgPC9hLWF2YXRhcj4KICAgIDwvYS10b29sdGlwPgogICAgPGEtYXZhdGFyIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjMTg5MGZmIj4KICAgICAgPHRlbXBsYXRlICNpY29uPjxVc2VyT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgPC9hLWF2YXRhcj4KICA8L2EtYXZhdGFyLWdyb3VwPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgVXNlck91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBVc2VyT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhci1ncm91cD4KICAgIDxhLWF2YXRhciBzcmM9Imh0dHBzOi8vem9zLmFsaXBheW9iamVjdHMuY29tL3Jtc3BvcnRhbC9PRFRMY2p4QWZ2cWJ4SG5WWENZWC5wbmciIC8+CiAgICA8YS1hdmF0YXIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmNTZhMDAiPks8L2EtYXZhdGFyPgogICAgPGEtdG9vbHRpcCB0aXRsZT0iQW50IFVzZXIiIHBsYWNlbWVudD0idG9wIj4KICAgICAgPGEtYXZhdGFyIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjODdkMDY4Ij4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgICAgIDwvYS1hdmF0YXI+CiAgICA8L2EtdG9vbHRpcD4KICAgIDxhLWF2YXRhciBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogIzE4OTBmZiI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgIDwvYS1hdmF0YXI+CiAgPC9hLWF2YXRhci1ncm91cD4KICA8YS1kaXZpZGVyIC8+CiAgPGEtYXZhdGFyLWdyb3VwIDptYXgtY291bnQ9IjIiIDptYXgtc3R5bGU9InsgY29sb3I6ICcjZjU2YTAwJywgYmFja2dyb3VuZENvbG9yOiAnI2ZkZTNjZicgfSI+CiAgICA8YS1hdmF0YXIgc3JjPSJodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvT0RUTGNqeEFmdnFieEhuVlhDWVgucG5nIiAvPgogICAgPGEtYXZhdGFyIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjMTg5MGZmIj5LPC9hLWF2YXRhcj4KICAgIDxhLXRvb2x0aXAgdGl0bGU9IkFudCBVc2VyIiBwbGFjZW1lbnQ9InRvcCI+CiAgICAgIDxhLWF2YXRhciBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogIzg3ZDA2OCI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPjxVc2VyT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgICA8L2EtYXZhdGFyPgogICAgPC9hLXRvb2x0aXA+CiAgICA8YS1hdmF0YXIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICMxODkwZmYiPgogICAgICA8dGVtcGxhdGUgI2ljb24+PFVzZXJPdXRsaW5lZCAvPjwvdGVtcGxhdGU+CiAgICA8L2EtYXZhdGFyPgogIDwvYS1hdmF0YXItZ3JvdXA+CiAgPGEtZGl2aWRlciAvPgogIDxhLWF2YXRhci1ncm91cAogICAgOm1heC1jb3VudD0iMiIKICAgIHNpemU9ImxhcmdlIgogICAgOm1heC1zdHlsZT0iewogICAgICBjb2xvcjogJyNmNTZhMDAnLAogICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjZmRlM2NmJywKICAgIH0iCiAgPgogICAgPGEtYXZhdGFyIHNyYz0iaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL09EVExjanhBZnZxYnhIblZYQ1lYLnBuZyIgLz4KICAgIDxhLWF2YXRhciBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogIzE4OTBmZiI+SzwvYS1hdmF0YXI+CiAgICA8YS10b29sdGlwIHRpdGxlPSJBbnQgVXNlciIgcGxhY2VtZW50PSJ0b3AiPgogICAgICA8YS1hdmF0YXIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICM4N2QwNjgiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48VXNlck91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgICAgPC9hLWF2YXRhcj4KICAgIDwvYS10b29sdGlwPgogICAgPGEtYXZhdGFyIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjMTg5MGZmIj4KICAgICAgPHRlbXBsYXRlICNpY29uPjxVc2VyT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgPC9hLWF2YXRhcj4KICA8L2EtYXZhdGFyLWdyb3VwPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBVc2VyT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFVzZXJPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:o(()=>[t(I,null,{default:o(()=>[t(e,{src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"}),t(e,{style:{"background-color":"#f56a00"}},{default:o(()=>s[0]||(s[0]=[a("K")])),_:1,__:[0]}),t(l,{title:"Ant User",placement:"top"},{default:o(()=>[t(e,{style:{"background-color":"#87d068"}},{icon:o(()=>[t(c)]),_:1})]),_:1}),t(e,{style:{"background-color":"#1890ff"}},{icon:o(()=>[t(c)]),_:1})]),_:1}),t(h),t(I,{"max-count":2,"max-style":{color:"#f56a00",backgroundColor:"#fde3cf"}},{default:o(()=>[t(e,{src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"}),t(e,{style:{"background-color":"#1890ff"}},{default:o(()=>s[1]||(s[1]=[a("K")])),_:1,__:[1]}),t(l,{title:"Ant User",placement:"top"},{default:o(()=>[t(e,{style:{"background-color":"#87d068"}},{icon:o(()=>[t(c)]),_:1})]),_:1}),t(e,{style:{"background-color":"#1890ff"}},{icon:o(()=>[t(c)]),_:1})]),_:1}),t(h),t(I,{"max-count":2,size:"large","max-style":{color:"#f56a00",backgroundColor:"#fde3cf"}},{default:o(()=>[t(e,{src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"}),t(e,{style:{"background-color":"#1890ff"}},{default:o(()=>s[2]||(s[2]=[a("K")])),_:1,__:[2]}),t(l,{title:"Ant User",placement:"top"},{default:o(()=>[t(e,{style:{"background-color":"#87d068"}},{icon:o(()=>[t(c)]),_:1})]),_:1}),t(e,{style:{"background-color":"#1890ff"}},{icon:o(()=>[t(c)]),_:1})]),_:1})]),htmlCode:o(()=>s[3]||(s[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar-group")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #f56a00")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("K"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tooltip")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Ant User"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #87d068")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar-group")]),a(),n("span",{class:"token attr-name"},":max-count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":max-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ color: '#f56a00', backgroundColor: '#fde3cf' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("K"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tooltip")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Ant User"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #87d068")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar-group")]),a(` `),n("span",{class:"token attr-name"},":max-count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},":max-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`{ color: '#f56a00', backgroundColor: '#fde3cf', }`),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("K"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tooltip")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Ant User"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #87d068")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:o(()=>s[4]||(s[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar-group")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #f56a00")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("K"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tooltip")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Ant User"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #87d068")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar-group")]),a(),n("span",{class:"token attr-name"},":max-count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":max-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ color: '#f56a00', backgroundColor: '#fde3cf' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("K"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tooltip")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Ant User"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #87d068")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar-group")]),a(` `),n("span",{class:"token attr-name"},":max-count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token attr-name"},":max-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`{ color: '#f56a00', backgroundColor: '#fde3cf', }`),n("span",{class:"token punctuation"},'"')]),a(` `),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("K"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tooltip")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Ant User"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #87d068")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" #1890ff")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}var J=r(_,[["render",E]]);const O=b({components:{AntDesignOutlined:x}});function K(u,s,i,k,d,m){const e=p("AntDesignOutlined"),c=p("a-avatar"),l=p("demo-box");return g(),C(l,{jsfiddle:{us:"Avatar size can be automatically adjusted based on the screen size.",cn:"\u5934\u50CF\u5927\u5C0F\u53EF\u4EE5\u6839\u636E\u5C4F\u5E55\u5927\u5C0F\u81EA\u52A8\u8C03\u6574\u3002",docHtml:`

zh-CN

\u5934\u50CF\u5927\u5C0F\u53EF\u4EE5\u6839\u636E\u5C4F\u5E55\u5927\u5C0F\u81EA\u52A8\u8C03\u6574\u3002

en-US

Avatar size can be automatically adjusted based on the screen size.

`,order:5,title:{"zh-CN":"\u54CD\u5E94\u5F0F\u5C3A\u5BF8","en-US":"Responsive Size"},relativePath:"src/docs/avatar/demo/responsive.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhciA6c2l6ZT0ieyB4czogMjQsIHNtOiAzMiwgbWQ6IDQwLCBsZzogNjQsIHhsOiA4MCwgeHhsOiAxMDAgfSI+CiAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgIDxBbnREZXNpZ25PdXRsaW5lZCAvPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgQW50RGVzaWduT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIEFudERlc2lnbk91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWF2YXRhciA6c2l6ZT0ieyB4czogMjQsIHNtOiAzMiwgbWQ6IDQwLCBsZzogNjQsIHhsOiA4MCwgeHhsOiAxMDAgfSI+CiAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgIDxBbnREZXNpZ25PdXRsaW5lZCAvPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtYXZhdGFyPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBBbnREZXNpZ25PdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgQW50RGVzaWduT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:o(()=>[t(c,{size:{xs:24,sm:32,md:40,lg:64,xl:80,xxl:100}},{icon:o(()=>[t(e)]),_:1})]),htmlCode:o(()=>s[0]||(s[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},":size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("AntDesignOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" AntDesignOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` AntDesignOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:o(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},":size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("AntDesignOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" AntDesignOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` AntDesignOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}var q=r(O,[["render",K]]);const T={pageData:{title:"Avatar",description:"",frontmatter:{category:"Components",subtitle:"\u5934\u50CF",type:"\u6570\u636E\u5C55\u793A",title:"Avatar",cover:"https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg"},headers:[{level:2,title:"\u8BBE\u8BA1\u5E08\u4E13\u5C5E",slug:"\u8BBE\u8BA1\u5E08\u4E13\u5C5E",content:"\u5B89\u88C5 [Kitchen Sketch \u63D2\u4EF6 \u{1F48E}](https://kitchen.alipay.com)\uFF0C\u4E00\u952E\u586B\u5145\u9AD8\u903C\u683C\u5934\u50CF\u548C\u6587\u672C\u3002"},{level:2,title:"API",slug:"api",content:"Avatar"},{level:3,title:"Avatar",slug:"avatar",content:""},{level:3,title:"Avatar.Group (2.2.0)",slug:"avatar-group-2-2-0",content:""}],relativePath:"src/docs/avatar/index.zh-CN.md",content:"\n\u7528\u6765\u4EE3\u8868\u7528\u6237\u6216\u4E8B\u7269\uFF0C\u652F\u6301\u56FE\u7247\u3001\u56FE\u6807\u6216\u5B57\u7B26\u5C55\u793A\u3002\n\n## \u8BBE\u8BA1\u5E08\u4E13\u5C5E\n\n\u5B89\u88C5 [Kitchen Sketch \u63D2\u4EF6 \u{1F48E}](https://kitchen.alipay.com)\uFF0C\u4E00\u952E\u586B\u5145\u9AD8\u903C\u683C\u5934\u50CF\u548C\u6587\u672C\u3002\n\n## API\n\n### Avatar\n\n| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |\n| --- | --- | --- | --- | --- |\n| icon | \u8BBE\u7F6E\u5934\u50CF\u7684\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u8BBE\u4E3A Icon \u7684 `type` \u6216 VNode | VNode \\| slot | - |\n| shape | \u6307\u5B9A\u5934\u50CF\u7684\u5F62\u72B6 | `circle` \\| `square` | `circle` | |\n| size | \u8BBE\u7F6E\u5934\u50CF\u7684\u5927\u5C0F | number \\| `large` \\| `small` \\| `default` \\| { xs: number, sm: number, ...} | `default` | 2.2.0 |\n| src | \u56FE\u7247\u7C7B\u5934\u50CF\u7684\u8D44\u6E90\u5730\u5740 | string | - |\n| srcset | \u8BBE\u7F6E\u56FE\u7247\u7C7B\u5934\u50CF\u54CD\u5E94\u5F0F\u8D44\u6E90\u5730\u5740 | string | - |\n| alt | \u56FE\u50CF\u65E0\u6CD5\u663E\u793A\u65F6\u7684\u66FF\u4EE3\u6587\u672C | string | - |\n| gap | \u5B57\u7B26\u7C7B\u578B\u8DDD\u79BB\u5DE6\u53F3\u4E24\u4FA7\u8FB9\u754C\u5355\u4F4D\u50CF\u7D20 | number | 4 | 2.2.0 |\n| draggable | \u56FE\u7247\u662F\u5426\u5141\u8BB8\u62D6\u52A8 | boolean \\| `'true'` \\| `'false'` | - | 2.2.0 |\n| loadError | \u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u7684\u4E8B\u4EF6\uFF0C\u8FD4\u56DE false \u4F1A\u5173\u95ED\u7EC4\u4EF6\u9ED8\u8BA4\u7684 fallback \u884C\u4E3A | () => boolean | - |\n\n### Avatar.Group (2.2.0)\n\n| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |\n| --- | --- | --- | --- | --- |\n| maxCount | \u663E\u793A\u7684\u6700\u5927\u5934\u50CF\u4E2A\u6570 | number | - | |\n| maxPopoverPlacement | \u591A\u4F59\u5934\u50CF\u6C14\u6CE1\u5F39\u51FA\u4F4D\u7F6E | `top` \\| `bottom` | `top` | |\n| maxStyle | \u591A\u4F59\u5934\u50CF\u6837\u5F0F | CSSProperties | - | |\n| size | \u8BBE\u7F6E\u5934\u50CF\u7684\u5927\u5C0F | number \\| `large` \\| `small` \\| `default` \\| { xs: number, sm: number, ...} | `default` | |\n",html:`

\u7528\u6765\u4EE3\u8868\u7528\u6237\u6216\u4E8B\u7269\uFF0C\u652F\u6301\u56FE\u7247\u3001\u56FE\u6807\u6216\u5B57\u7B26\u5C55\u793A\u3002

\u8BBE\u8BA1\u5E08\u4E13\u5C5E

\u5B89\u88C5 Kitchen Sketch \u63D2\u4EF6 \u{1F48E}\uFF0C\u4E00\u952E\u586B\u5145\u9AD8\u903C\u683C\u5934\u50CF\u548C\u6587\u672C\u3002

API

Avatar

\u53C2\u6570 \u8BF4\u660E \u7C7B\u578B \u9ED8\u8BA4\u503C \u7248\u672C
icon \u8BBE\u7F6E\u5934\u50CF\u7684\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u8BBE\u4E3A Icon \u7684 type \u6216 VNode VNode | slot -
shape \u6307\u5B9A\u5934\u50CF\u7684\u5F62\u72B6 circle | square circle
size \u8BBE\u7F6E\u5934\u50CF\u7684\u5927\u5C0F number | large | small | default | { xs: number, sm: number, ...} default 2.2.0
src \u56FE\u7247\u7C7B\u5934\u50CF\u7684\u8D44\u6E90\u5730\u5740 string -
srcset \u8BBE\u7F6E\u56FE\u7247\u7C7B\u5934\u50CF\u54CD\u5E94\u5F0F\u8D44\u6E90\u5730\u5740 string -
alt \u56FE\u50CF\u65E0\u6CD5\u663E\u793A\u65F6\u7684\u66FF\u4EE3\u6587\u672C string -
gap \u5B57\u7B26\u7C7B\u578B\u8DDD\u79BB\u5DE6\u53F3\u4E24\u4FA7\u8FB9\u754C\u5355\u4F4D\u50CF\u7D20 number 4 2.2.0
draggable \u56FE\u7247\u662F\u5426\u5141\u8BB8\u62D6\u52A8 boolean | 'true' | 'false' - 2.2.0
loadError \u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u7684\u4E8B\u4EF6\uFF0C\u8FD4\u56DE false \u4F1A\u5173\u95ED\u7EC4\u4EF6\u9ED8\u8BA4\u7684 fallback \u884C\u4E3A () => boolean -

Avatar.Group (2.2.0)

\u53C2\u6570 \u8BF4\u660E \u7C7B\u578B \u9ED8\u8BA4\u503C \u7248\u672C
maxCount \u663E\u793A\u7684\u6700\u5927\u5934\u50CF\u4E2A\u6570 number -
maxPopoverPlacement \u591A\u4F59\u5934\u50CF\u6C14\u6CE1\u5F39\u51FA\u4F4D\u7F6E top | bottom top
maxStyle \u591A\u4F59\u5934\u50CF\u6837\u5F0F CSSProperties -
size \u8BBE\u7F6E\u5934\u50CF\u7684\u5927\u5C0F number | large | small | default | { xs: number, sm: number, ...} default
`,lastUpdated:1748059052609}},Q={class:"markdown"};function M(u,s,i,k,d,m){return g(),X("article",Q,s[0]||(s[0]=[Y('

\u7528\u6765\u4EE3\u8868\u7528\u6237\u6216\u4E8B\u7269\uFF0C\u652F\u6301\u56FE\u7247\u3001\u56FE\u6807\u6216\u5B57\u7B26\u5C55\u793A\u3002

\u8BBE\u8BA1\u5E08\u4E13\u5C5E

\u5B89\u88C5 Kitchen Sketch \u63D2\u4EF6 \u{1F48E}\uFF0C\u4E00\u952E\u586B\u5145\u9AD8\u903C\u683C\u5934\u50CF\u548C\u6587\u672C\u3002

API

Avatar

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
icon\u8BBE\u7F6E\u5934\u50CF\u7684\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u8BBE\u4E3A Icon \u7684 type \u6216 VNodeVNode | slot-
shape\u6307\u5B9A\u5934\u50CF\u7684\u5F62\u72B6circle | squarecircle
size\u8BBE\u7F6E\u5934\u50CF\u7684\u5927\u5C0Fnumber | large | small | default | { xs: number, sm: number, ...}default2.2.0
src\u56FE\u7247\u7C7B\u5934\u50CF\u7684\u8D44\u6E90\u5730\u5740string-
srcset\u8BBE\u7F6E\u56FE\u7247\u7C7B\u5934\u50CF\u54CD\u5E94\u5F0F\u8D44\u6E90\u5730\u5740string-
alt\u56FE\u50CF\u65E0\u6CD5\u663E\u793A\u65F6\u7684\u66FF\u4EE3\u6587\u672Cstring-
gap\u5B57\u7B26\u7C7B\u578B\u8DDD\u79BB\u5DE6\u53F3\u4E24\u4FA7\u8FB9\u754C\u5355\u4F4D\u50CF\u7D20number42.2.0
draggable\u56FE\u7247\u662F\u5426\u5141\u8BB8\u62D6\u52A8boolean | 'true' | 'false'-2.2.0
loadError\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u7684\u4E8B\u4EF6\uFF0C\u8FD4\u56DE false \u4F1A\u5173\u95ED\u7EC4\u4EF6\u9ED8\u8BA4\u7684 fallback \u884C\u4E3A() => boolean-

Avatar.Group (2.2.0)

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
maxCount\u663E\u793A\u7684\u6700\u5927\u5934\u50CF\u4E2A\u6570number-
maxPopoverPlacement\u591A\u4F59\u5934\u50CF\u6C14\u6CE1\u5F39\u51FA\u4F4D\u7F6Etop | bottomtop
maxStyle\u591A\u4F59\u5934\u50CF\u6837\u5F0FCSSProperties-
size\u8BBE\u7F6E\u5934\u50CF\u7684\u5927\u5C0Fnumber | large | small | default | { xs: number, sm: number, ...}default
',8)]))}var $=r(T,[["render",M]]);const nn={pageData:{title:"Avatar",description:"",frontmatter:{category:"Components",type:"Data Display",title:"Avatar",cover:"https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg"},headers:[{level:2,title:"API",slug:"api",content:"Avatar"},{level:3,title:"Avatar",slug:"avatar",content:""},{level:3,title:"Avatar.Group (2.2.0)",slug:"avatar-group-2-2-0",content:""}],relativePath:"src/docs/avatar/index.en-US.md",content:"\nAvatars can be used to represent people or objects. It supports images, `Icon`s, or letters.\n\n## API\n\n### Avatar\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \\| slot | - |\n| shape | the shape of avatar | `circle` \\| `square` | `circle` |\n| size | The size of the avatar | number \\| `large` \\| `small` \\| `default` \\| { xs: number, sm: number, ...} | `default` | 2.2.0 |\n| src | the address of the image for an image avatar | string | - |\n| srcset | a list of sources to use for different screen resolutions | string | - |\n| alt | This attribute defines the alternative text describing the image | string | - |\n| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |\n| draggable | Whether the picture is allowed to be dragged | boolean \\| `'true'` \\| `'false'` | - | 2.2.0 |\n| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |\n\n### Avatar.Group (2.2.0)\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| maxCount | Max avatars to show | number | - | |\n| maxPopoverPlacement | The placement of excess avatar Popover | `top` \\| `bottom` | `top` | |\n| maxStyle | The style of excess avatar style | CSSProperties | - | |\n| size | The size of the avatar | number \\| `large` \\| `small` \\| `default` \\| { xs: number, sm: number, ...} | `default` | |\n",html:`

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

API

Avatar

Property Description Type Default Version
icon the Icon type for an icon avatar, see Icon Component VNode | slot -
shape the shape of avatar circle | square circle
size The size of the avatar number | large | small | default | { xs: number, sm: number, ...} default 2.2.0
src the address of the image for an image avatar string -
srcset a list of sources to use for different screen resolutions string -
alt This attribute defines the alternative text describing the image string -
gap Letter type unit distance between left and right sides number 4 2.2.0
draggable Whether the picture is allowed to be dragged boolean | 'true' | 'false' - 2.2.0
loadError handler when img load error, return false to prevent default fallback behavior () => boolean -

Avatar.Group (2.2.0)

Property Description Type Default Version
maxCount Max avatars to show number -
maxPopoverPlacement The placement of excess avatar Popover top | bottom top
maxStyle The style of excess avatar style CSSProperties -
size The size of the avatar number | large | small | default | { xs: number, sm: number, ...} default
`,lastUpdated:1748059052609}},an={class:"markdown"};function tn(u,s,i,k,d,m){return g(),X("article",an,s[0]||(s[0]=[Y('

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

API

Avatar

PropertyDescriptionTypeDefaultVersion
iconthe Icon type for an icon avatar, see Icon ComponentVNode | slot-
shapethe shape of avatarcircle | squarecircle
sizeThe size of the avatarnumber | large | small | default | { xs: number, sm: number, ...}default2.2.0
srcthe address of the image for an image avatarstring-
srcseta list of sources to use for different screen resolutionsstring-
altThis attribute defines the alternative text describing the imagestring-
gapLetter type unit distance between left and right sidesnumber42.2.0
draggableWhether the picture is allowed to be draggedboolean | 'true' | 'false'-2.2.0
loadErrorhandler when img load error, return false to prevent default fallback behavior() => boolean-

Avatar.Group (2.2.0)

PropertyDescriptionTypeDefaultVersion
maxCountMax avatars to shownumber-
maxPopoverPlacementThe placement of excess avatar Popovertop | bottomtop
maxStyleThe style of excess avatar styleCSSProperties-
sizeThe size of the avatarnumber | large | small | default | { xs: number, sm: number, ...}default
',6)]))}var sn=r(nn,[["render",tn]]);const on=b({CN:$,US:sn,components:{Basic:P,Type:R,Dynamic:z,Badge:H,Group:J,Responsive:q},setup(){return{}}});function en(u,s,i,k,d,m){const e=p("basic"),c=p("type"),l=p("dynamic"),I=p("badge"),h=p("group"),Z=p("responsive"),f=p("demo-sort");return g(),C(f,null,{default:o(()=>[t(e),t(c),t(l),t(I),t(h),t(Z)]),_:1})}var un=r(on,[["render",en]]);export{un as default};