wxc-avatar

MinUI 小程序组件 - 头像

Install

  1. $ min install @minui/wxc-avatar

Demos

消息提示

头像 avatar - 图1

  1. <template>
  2.   <wxc-avatar class="avatar" count="7" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-avatar': '@minui/wxc-avatar'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style>
  18.   .avatar {
  19.     display: block;
  20.     width: 120rpx;
  21.     height: 120rpx;
  22.   }
  23. </style>

默认姿势（圆形头像）

头像 avatar - 图2

  1. <template>
  2.   <wxc-avatar class="avatar" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-avatar': '@minui/wxc-avatar'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style>
  18.   .avatar {
  19.     display: block;
  20.     width: 120rpx;
  21.     height: 120rpx;
  22.   }
  23. </style>

方形头像

头像 avatar - 图3

  1. <template>
  2.   <wxc-avatar class="avatar" mold="square" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-avatar': '@minui/wxc-avatar'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style>
  18.   .avatar {
  19.     display: block;
  20.     width: 120rpx;
  21.     height: 120rpx;
  22.   }
  23. </style>

不同规格

头像 avatar - 图4

  1. <template>
  2.   <wxc-avatar class="avatar avatar__1" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
  3.   <wxc-avatar class="avatar avatar__2" src="https://s10.mogucdn.com/mlcdn/c45406/171116_3a30h33df8cj7f651al68hdh7bki7_528x528.png"></wxc-avatar>
  4.   <wxc-avatar class="avatar avatar__3" src="https://s10.mogucdn.com/mlcdn/c45406/171116_62f571l0ki0ffcg94h6kg6452h497_356x356.png"></wxc-avatar>
  5. </template>
  7. <script>
  8. export default {
  9.   config: {
  10.     usingComponents: {
  11.       'wxc-avatar': '@minui/wxc-avatar'
  12.     }
  13.   },
  14.   data: {},
  15.   methods: {}
  16. }
  17. </script>
  19. <style>
  20.   .avatar {
  21.     display: inline-block;
  22.     margin-right: 20rpx;
  23.   }
  24.   .avatar__1 {
  25.     width: 120rpx;
  26.     height: 120rpx;
  27.   }
  28.   .avatar__2 {
  29.     width: 160rpx;
  30.     height: 160rpx;
  31.   }
  32.   .avatar__3 {
  33.     width: 200rpx;
  34.     height: 200rpx;
  35.   }
  36. </style>

自定义文字版

头像 avatar - 图5

  1. <template>
  2.   <wxc-avatar class="avatar">U</wxc-avatar>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-avatar': '@minui/wxc-avatar'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style>
  18.   .avatar {
  19.     display: block;
  20.     width: 120rpx;
  21.     height: 120rpx;
  22.     border-radius: 50%;
  23.     background: #31b0d5;
  24.     color: #FFF;
  25.   }
  26. </style>

API

Avatar Props

名称描述
src头像图片地址
mold头像规格，circle(正圆)、square(正方)，默认 circle
count消息数，显示在头像右上角
地址
avatar 组件文档 https://meili.github.io/min/docs/minui/index.html#avatar
avatar 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-avatar
MinUI 组件库 https://github.com/meili/minui

Preview

avatar

ChangeLog

v1.0.0（2017-11-16）

  • 初始版本