wxc-avatar

消息提示

  <wxc-avatar class="avatar" count="7" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-avatar': '@minui/wxc-avatar'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
  .avatar {
    width: 120rpx;
    height: 120rpx;
  }
</style>

默认姿势（圆形头像）

方形头像

<template>
  <wxc-avatar class="avatar" mold="square" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-avatar': '@minui/wxc-avatar'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
  .avatar {
    display: block;
    width: 120rpx;
    height: 120rpx;
  }

自定义文字版

<template>
  <wxc-avatar class="avatar">U</wxc-avatar>
</template>
export default {
  config: {
    usingComponents: {
      'wxc-avatar': '@minui/wxc-avatar'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
  .avatar {
    display: block;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: #31b0d5;
    color: #FFF;
  }
</style>

Avatar Props

v1.0.0（2017-11-16）