黔东南购物网站开发设计,简易手工制作,官网+wordpress,做pc和移动网站的适配用图标、图片或者字符的形式展示用户或事物信息。 常用于管理系统或web网站的用户头像#xff0c;在用户账户模块更换头像操作也能看到关于Avatar组件的应用。 1.如何使用#xff1f;
通过 shape 和 size 设置头像的形状和大小。
templateel-row classde… 用图标、图片或者字符的形式展示用户或事物信息。 常用于管理系统或web网站的用户头像在用户账户模块更换头像操作也能看到关于Avatar组件的应用。 1.如何使用
通过 shape 和 size 设置头像的形状和大小。
templateel-row classdemo-avatar demo-basicel-col :span12div classsub-titlecircle/divdiv classdemo-basic--circlediv classblockel-avatar :size50 :srccircleUrl/el-avatar/divdiv classblock v-forsize in sizeList :keysizeel-avatar :sizesize :srccircleUrl/el-avatar/div/div/el-col el-col :span12div classsub-titlesquare/divdiv classdemo-basic--circlediv classblockel-avatar shapesquare :size50 :srcsquareUrl/el-avatar/divdiv classblock v-forsize in sizeList :keysizeel-avatar shapesquare :sizesize :srcsquareUrl/el-avatar/div/div/el-col /el-row
/template
scriptexport default {data () {return {circleUrl: https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png,squareUrl: https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png,sizeList: [large, medium, small]}}}
/script
2.展示类型
支持三种类型图标、图片和字符
templatediv classdemo-typedivel-avatar iconel-icon-user-solid/el-avatar/divdivel-avatar srchttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png/el-avatar/divdivel-avatar user /el-avatar/div/div
/template
3.图片加载失败的 fallback 行为
当展示类型为图片的时候图片加载失败的 fallback 行为
templatediv classdemo-typeel-avatar :size60 srchttps://empty errorerrorHandlerimg srchttps://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png//el-avatar/div
/template
scriptexport default {methods: {errorHandler() {return true}}}
/script
4. 图片如何适应容器框
当展示类型为图片的时候使用 fit 属性定义图片如何适应容器框同原生 object-fit。
templatediv classdemo-fitdiv classblock v-forfit in fits :keyfitspan classtitle{{ fit }}/spanel-avatar shapesquare :size100 :fitfit :srcurl/el-avatar/div/div
/template
scriptexport default {data() {return {fits: [fill, contain, cover, none, scale-down],url: https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg}}}
/script 关于Avatar组件的常见使用就是这些想要深入了解可前往头像组件
