(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{1466:function(a,s,t){"use strict";t.r(s);var n=function(){var a=this,s=a.$createElement,t=a._self._c||s;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <div>\n      <a-avatar :size="64" icon="user"/>\n      <a-avatar size="large" icon="user"/>\n      <a-avatar icon="user"/>\n      <a-avatar size="small" icon="user"/>\n    </div>\n    <br/>\n    <div>\n      <a-avatar shape="square" :size="64" icon="user"/>\n      <a-avatar shape="square" size="large" icon="user"/>\n      <a-avatar shape="square" icon="user"/>\n      <a-avatar shape="square" size="small" icon="user"/>\n    </div>\n  </div>\n',script:null,style:null,us:"\n#### basic\nThree sizes and two shapes are available.\n",cn:"\n#### 基本\n头像有三种尺寸，两种形状可选。\n",sourceCode:'<template>\n  <div>\n    <div>\n      <a-avatar :size="64" icon="user" />\n      <a-avatar size="large" icon="user" />\n      <a-avatar icon="user" />\n      <a-avatar size="small" icon="user" />\n    </div>\n    <br />\n    <div>\n      <a-avatar shape="square" :size="64" icon="user" />\n      <a-avatar shape="square" size="large" icon="user" />\n      <a-avatar shape="square" icon="user" />\n      <a-avatar shape="square" size="small" icon="user" />\n    </div>\n  </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("div",[t("a-avatar",{attrs:{size:64,icon:"user"}}),a._v(" "),t("a-avatar",{attrs:{size:"large",icon:"user"}}),a._v(" "),t("a-avatar",{attrs:{icon:"user"}}),a._v(" "),t("a-avatar",{attrs:{size:"small",icon:"user"}})],1),a._v(" "),t("br"),a._v(" "),t("div",[t("a-avatar",{attrs:{shape:"square",size:64,icon:"user"}}),a._v(" "),t("a-avatar",{attrs:{shape:"square",size:"large",icon:"user"}}),a._v(" "),t("a-avatar",{attrs:{shape:"square",icon:"user"}}),a._v(" "),t("a-avatar",{attrs:{shape:"square",size:"small",icon:"user"}})],1)])]),a._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"基本"}},[a._v("基本 "),t("a",{staticClass:"anchor",attrs:{href:"#基本"}},[a._v("#")])]),a._v(" "),t("p",[a._v("头像有三种尺寸，两种形状可选。")])]),a._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"basic"}},[a._v("basic "),t("a",{staticClass:"anchor",attrs:{href:"#basic"}},[a._v("#")])]),a._v(" "),t("p",[a._v("Three sizes and two shapes are available.")])]),a._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n  "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v(":size")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"64"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("size")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"large"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("size")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"small"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("br")]),a._v(" />")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("shape")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"square"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v(":size")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"64"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("shape")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"square"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("size")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"large"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("shape")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"square"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("shape")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"square"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("size")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"small"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n  "),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n")])])])],2)]],2)};n._withStripped=!0;var v=t(31),l=Object(v.a)({},n,[],!1,null,null,null);l.options.__file="components/avatar/demo/basic.md";var e=l.exports,r=function(){var a=this,s=a.$createElement,t=a._self._c||s;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <span style="margin-right:24px">\n      <a-badge :count="1"><a-avatar shape="square" icon="user"/></a-badge>\n    </span>\n    <span>\n      <a-badge dot=""><a-avatar shape="square" icon="user"/></a-badge>\n    </span>\n  </div>\n',script:null,style:null,us:"\n#### With Badge\nUsually used for messages remind.\n",cn:"\n#### 带徽标的头像\n通常用于消息提示。\n",sourceCode:'<template>\n  <div>\n    <span style="margin-right:24px">\n      <a-badge :count="1"><a-avatar shape="square" icon="user"/></a-badge>\n    </span>\n    <span>\n      <a-badge dot><a-avatar shape="square" icon="user"/></a-badge>\n    </span>\n  </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("span",{staticStyle:{"margin-right":"24px"}},[t("a-badge",{attrs:{count:1}},[t("a-avatar",{attrs:{shape:"square",icon:"user"}})],1)],1),a._v(" "),t("span",[t("a-badge",{attrs:{dot:""}},[t("a-avatar",{attrs:{shape:"square",icon:"user"}})],1)],1)])]),a._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"带徽标的头像"}},[a._v("带徽标的头像 "),t("a",{staticClass:"anchor",attrs:{href:"#带徽标的头像"}},[a._v("#")])]),a._v(" "),t("p",[a._v("通常用于消息提示。")])]),a._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"With-Badge"}},[a._v("With Badge "),t("a",{staticClass:"anchor",attrs:{href:"#With-Badge"}},[a._v("#")])]),a._v(" "),t("p",[a._v("Usually used for messages remind.")])]),a._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n  "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("span")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("style")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"margin-right:24px"')]),a._v(">")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-badge")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v(":count")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("shape")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"square"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v("/>")]),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("a-badge")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("span")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("span")]),a._v(">")]),a._v("\n      "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-badge")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("dot")]),a._v(">")]),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("shape")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"square"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v("/>")]),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("a-badge")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("span")]),a._v(">")]),a._v("\n  "),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n")])])])],2)]],2)};r._withStripped=!0;var i=Object(v.a)({},r,[],!1,null,null,null);i.options.__file="components/avatar/demo/badge.md";var _=i.exports,c=function(){var a=this,s=a.$createElement,t=a._self._c||s;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-avatar icon="user"/>\n    <a-avatar>U</a-avatar>\n    <a-avatar>USER</a-avatar>\n    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>\n    <a-avatar style="color: #f56a00; backgroundColor: #fde3cf">U</a-avatar>\n    <a-avatar style="backgroundColor:#87d068" icon="user"/>\n  </div>\n',script:null,style:null,us:"\n#### Type\nImage, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.\n",cn:"\n#### 类型\n支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。\n",sourceCode:'<template>\n  <div>\n    <a-avatar icon="user" />\n    <a-avatar>U</a-avatar>\n    <a-avatar>USER</a-avatar>\n    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />\n    <a-avatar style="color: #f56a00; backgroundColor: #fde3cf">U</a-avatar>\n    <a-avatar style="backgroundColor:#87d068" icon="user" />\n  </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-avatar",{attrs:{icon:"user"}}),a._v(" "),t("a-avatar",[a._v("U")]),a._v(" "),t("a-avatar",[a._v("USER")]),a._v(" "),t("a-avatar",{attrs:{src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"}}),a._v(" "),t("a-avatar",{staticStyle:{color:"#f56a00",backgroundColor:"#fde3cf"}},[a._v("U")]),a._v(" "),t("a-avatar",{staticStyle:{backgroundColor:"#87d068"},attrs:{icon:"user"}})],1)]),a._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"类型"}},[a._v("类型 "),t("a",{staticClass:"anchor",attrs:{href:"#类型"}},[a._v("#")])]),a._v(" "),t("p",[a._v("支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。")])]),a._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Type"}},[a._v("Type "),t("a",{staticClass:"anchor",attrs:{href:"#Type"}},[a._v("#")])]),a._v(" "),t("p",[a._v("Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.")])]),a._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n  "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(">")]),a._v("U"),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(">")]),a._v("USER"),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("src")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"')]),a._v(" />")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("style")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"color: #f56a00; backgroundColor: #fde3cf"')]),a._v(">")]),a._v("U"),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("style")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"backgroundColor:#87d068"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("icon")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"user"')]),a._v(" />")]),a._v("\n  "),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n")])])])],2)]],2)};c._withStripped=!0;var o=Object(v.a)({},c,[],!1,null,null,null);o.options.__file="components/avatar/demo/type.md";var p=o.exports,h=function(){var a=this,s=a.$createElement,t=a._self._c||s;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-avatar shape="square" size="large" :style="{backgroundColor: color, verticalAlign: \'middle\'}">{{avatarValue}}</a-avatar>\n    <a-button size="small" :style="{ marginLeft: 16, verticalAlign: \'middle\' }" @click="changeValue">改变</a-button>\n  </div>\n',script:"\n  const UserList = ['U', 'Lucy', 'Tom', 'Edward'];\n  const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];\n  export default {\n    data() {\n      return {\n        avatarValue: UserList[0],\n        color: colorList[0],\n      };\n    },\n    methods: {\n      changeValue() {\n        const index = UserList.indexOf(this.avatarValue);\n        this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];\n        this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];\n      },\n    },\n  };\n",style:null,us:"\n#### Autoset Font Size\nFor 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.\n",cn:"\n#### 自动调整字符大小\n对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。\n",sourceCode:"<template>\n  <div>\n    <a-avatar shape=\"square\" size=\"large\" :style=\"{backgroundColor: color, verticalAlign: 'middle'}\"\n      >{{avatarValue}}</a-avatar\n    >\n    <a-button size=\"small\" :style=\"{ marginLeft: 16, verticalAlign: 'middle' }\" @click=\"changeValue\"\n      >改变</a-button\n    >\n  </div>\n</template>\n<script>\n  const UserList = ['U', 'Lucy', 'Tom', 'Edward'];\n  const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];\n  export default {\n    data() {\n      return {\n        avatarValue: UserList[0],\n        color: colorList[0],\n      };\n    },\n    methods: {\n      changeValue() {\n        const index = UserList.indexOf(this.avatarValue);\n        this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];\n        this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];\n      },\n    },\n  };\n<\/script>\n"}}},[t("template",{slot:"component"},[t("div",[t("a-avatar",{style:{backgroundColor:a.color,verticalAlign:"middle"},attrs:{shape:"square",size:"large"}},[a._v(a._s(a.avatarValue))]),a._v(" "),t("a-button",{style:{marginLeft:16,verticalAlign:"middle"},attrs:{size:"small"},on:{click:a.changeValue}},[a._v("改变")])],1)]),a._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"自动调整字符大小"}},[a._v("自动调整字符大小 "),t("a",{staticClass:"anchor",attrs:{href:"#自动调整字符大小"}},[a._v("#")])]),a._v(" "),t("p",[a._v("对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。")])]),a._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Autoset-Font-Size"}},[a._v("Autoset Font Size "),t("a",{staticClass:"anchor",attrs:{href:"#Autoset-Font-Size"}},[a._v("#")])]),a._v(" "),t("p",[a._v("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.")])]),a._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n  "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("shape")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"square"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("size")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"large"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v(":style")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v("\"{backgroundColor: color, verticalAlign: 'middle'}\"")]),a._v("\n      >")]),t("span",[a._v("{{")]),a._v("avatarValue"),t("span",[a._v("}}")]),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("a-avatar")]),a._v("\n    >")]),a._v("\n    "),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("a-button")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("size")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"small"')]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v(":style")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v("\"{ marginLeft: 16, verticalAlign: 'middle' }\"")]),a._v(" "),t("span",{staticClass:"hljs-attr"},[a._v("@click")]),a._v("="),t("span",{staticClass:"hljs-string"},[a._v('"changeValue"')]),a._v("\n      >")]),a._v("改变"),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("a-button")]),a._v("\n    >")]),a._v("\n  "),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),t("span",{staticClass:"hljs-tag"},[a._v("<"),t("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),t("span",{staticClass:"javascript"},[a._v("\n  "),t("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" UserList = ["),t("span",{staticClass:"hljs-string"},[a._v("'U'")]),a._v(", "),t("span",{staticClass:"hljs-string"},[a._v("'Lucy'")]),a._v(", "),t("span",{staticClass:"hljs-string"},[a._v("'Tom'")]),a._v(", "),t("span",{staticClass:"hljs-string"},[a._v("'Edward'")]),a._v("];\n  "),t("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" colorList = ["),t("span",{staticClass:"hljs-string"},[a._v("'#f56a00'")]),a._v(", "),t("span",{staticClass:"hljs-string"},[a._v("'#7265e6'")]),a._v(", "),t("span",{staticClass:"hljs-string"},[a._v("'#ffbf00'")]),a._v(", "),t("span",{staticClass:"hljs-string"},[a._v("'#00a2ae'")]),a._v("];\n  "),t("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),t("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[a._v("avatarValue")]),a._v(": UserList["),t("span",{staticClass:"hljs-number"},[a._v("0")]),a._v("],\n        "),t("span",{staticClass:"hljs-attr"},[a._v("color")]),a._v(": colorList["),t("span",{staticClass:"hljs-number"},[a._v("0")]),a._v("],\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[a._v("methods")]),a._v(": {\n      changeValue() {\n        "),t("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" index = UserList.indexOf("),t("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".avatarValue);\n        "),t("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".avatarValue = index < UserList.length - "),t("span",{staticClass:"hljs-number"},[a._v("1")]),a._v(" ? UserList[index + "),t("span",{staticClass:"hljs-number"},[a._v("1")]),a._v("] : UserList["),t("span",{staticClass:"hljs-number"},[a._v("0")]),a._v("];\n        "),t("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".color = index < colorList.length - "),t("span",{staticClass:"hljs-number"},[a._v("1")]),a._v(" ? colorList[index + "),t("span",{staticClass:"hljs-number"},[a._v("1")]),a._v("] : colorList["),t("span",{staticClass:"hljs-number"},[a._v("0")]),a._v("];\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[a._v("</"),t("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};h._withStripped=!0;var d=["U","Lucy","Tom","Edward"],u=["#f56a00","#7265e6","#ffbf00","#00a2ae"],C={data:function(){return{avatarValue:d[0],color:u[0]}},methods:{changeValue:function(){var a=d.indexOf(this.avatarValue);this.avatarValue=a<d.length-1?d[a+1]:d[0],this.color=a<u.length-1?u[a+1]:u[0]}}},j=Object(v.a)(C,h,[],!1,null,null,null);j.options.__file="components/avatar/demo/dynamic.md";var g=j.exports,m=function(){var a=this.$createElement;this._self._c;return this._m(0)};m._withStripped=!0;var f=Object(v.a)({},m,[function(){var a=this,s=a.$createElement,t=a._self._c||s;return t("div",[t("h2",{attrs:{id:"API"}},[a._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[a._v("#")])]),a._v(" "),t("table",[t("thead",[t("tr",[t("th",[a._v("参数")]),a._v(" "),t("th",[a._v("说明")]),a._v(" "),t("th",[a._v("类型")]),a._v(" "),t("th",[a._v("默认值")])])]),a._v(" "),t("tbody",[t("tr",[t("td",[a._v("icon")]),a._v(" "),t("td",[a._v("设置头像的图标类型，参考 "),t("code",{pre:!0},[a._v("Icon")]),a._v(" 组件")]),a._v(" "),t("td",[a._v("string")]),a._v(" "),t("td",[a._v("-")])]),a._v(" "),t("tr",[t("td",[a._v("shape")]),a._v(" "),t("td",[a._v("指定头像的形状")]),a._v(" "),t("td",[a._v("Enum{ 'circle', 'square' }")]),a._v(" "),t("td",[t("code",{pre:!0},[a._v("circle")])])]),a._v(" "),t("tr",[t("td",[a._v("size")]),a._v(" "),t("td",[a._v("设置头像的大小")]),a._v(" "),t("td",[a._v("number | Enum{ 'large', 'small', 'default' }")]),a._v(" "),t("td",[t("code",{pre:!0},[a._v("default")])])]),a._v(" "),t("tr",[t("td",[a._v("src")]),a._v(" "),t("td",[a._v("图片类头像的资源地址")]),a._v(" "),t("td",[a._v("string")]),a._v(" "),t("td",[a._v("-")])]),a._v(" "),t("tr",[t("td",[a._v("srcSet")]),a._v(" "),t("td",[a._v("设置图片类头像响应式资源地址")]),a._v(" "),t("td",[a._v("string")]),a._v(" "),t("td",[a._v("-")])]),a._v(" "),t("tr",[t("td",[a._v("alt")]),a._v(" "),t("td",[a._v("图像无法显示时的替代文本")]),a._v(" "),t("td",[a._v("string")]),a._v(" "),t("td",[a._v("-")])]),a._v(" "),t("tr",[t("td",[a._v("loadError")]),a._v(" "),t("td",[a._v("图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为")]),a._v(" "),t("td",[a._v("() => boolean")]),a._v(" "),t("td",[a._v("-")])])])])])}],!1,null,null,null);f.options.__file="components/avatar/index.zh-CN.md";var b=f.exports,y=function(){var a=this.$createElement;this._self._c;return this._m(0)};y._withStripped=!0;var x=Object(v.a)({},y,[function(){var a=this,s=a.$createElement,t=a._self._c||s;return t("div",[t("h2",{attrs:{id:"API"}},[a._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[a._v("#")])]),a._v(" "),t("table",[t("thead",[t("tr",[t("th",[a._v("Property")]),a._v(" "),t("th",[a._v("Description")]),a._v(" "),t("th",[a._v("Type")]),a._v(" "),t("th",[a._v("Default")])])]),a._v(" "),t("tbody",[t("tr",[t("td",[a._v("icon")]),a._v(" "),t("td",[a._v("the "),t("code",{pre:!0},[a._v("Icon")]),a._v(" type for an icon avatar, see "),t("code",{pre:!0},[a._v("Icon")]),a._v(" Component")]),a._v(" "),t("td",[a._v("string")]),a._v(" "),t("td",[a._v("-")])]),a._v(" "),t("tr",[t("td",[a._v("shape")]),a._v(" "),t("td",[a._v("the shape of avatar")]),a._v(" "),t("td",[t("code",{pre:!0},[a._v("circle")]),a._v(" | "),t("code",{pre:!0},[a._v("square")])]),a._v(" "),t("td",[t("code",{pre:!0},[a._v("circle")])])]),a._v(" "),t("tr",[t("td",[a._v("size")]),a._v(" "),t("td",[a._v("the size of the avatar")]),a._v(" "),t("td",[a._v("number | string: "),t("code",{pre:!0},[a._v("large")]),a._v(" "),t("code",{pre:!0},[a._v("small")]),a._v(" "),t("code",{pre:!0},[a._v("default")])]),a._v(" "),t("td",[t("code",{pre:!0},[a._v("default")])])]),a._v(" "),t("tr",[t("td",[a._v("src")]),a._v(" "),t("td",[a._v("the address of the image for an image avatar")]),a._v(" "),t("td",[a._v("string")]),a._v(" "),t("td",[a._v("-")])]),a._v(" "),t("tr",[t("td",[a._v("srcSet")]),a._v(" "),t("td",[a._v("a list of sources to use for different screen resolutions")]),a._v(" "),t("td",[a._v("string")]),a._v(" "),t("td",[a._v("-")])]),a._v(" "),t("tr",[t("td",[a._v("alt")]),a._v(" "),t("td",[a._v("This attribute defines the alternative text describing the image")]),a._v(" "),t("td",[a._v("string")]),a._v(" "),t("td",[a._v("-")])]),a._v(" "),t("tr",[t("td",[a._v("loadError")]),a._v(" "),t("td",[a._v("handler when img load error, return false to prevent default fallback behavior")]),a._v(" "),t("td",[a._v("() => boolean")]),a._v(" "),t("td",[a._v("-")])])])])])}],!1,null,null,null);x.options.__file="components/avatar/index.en-US.md";var z=x.exports,L="# Avatar头像\n          用来代表用户或事物，支持图片、图标或字符展示。\n          ## 设计师专属\n安装 [Kitchen Sketch 插件 �](https://kitchen.alipay.com)，一键填充高逼格头像和文本.\n\n          ## 代码演示",U="# Avatar\n          Avatars can be used to represent people or objects. It supports images, 'Icon's, or letters.\n          ## Examples\n          ",k={category:"Components",subtitle:"头像",type:"Data Display",zhType:"数据展示",title:"Avatar",render:function(){var a=arguments[0];return a("div",[a("md",{attrs:{cn:L,us:U}}),a(e),a("br"),a(_),a("br"),a(p),a("br"),a(g),a("br"),a("api",[a("template",{slot:"cn"},[a(b)]),a(z)])])}},q=Object(v.a)(k,void 0,void 0,!1,null,null,null);q.options.__file="components/avatar/demo/index.vue";s.default=q.exports}}]);