DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/demo/element/avatar.vue

<template>
  <view>
    <l-title>图片头像：</l-title>
    <view class="padding flex flex-wrap justify-around">
      <l-avatar src="https://img.learun.cn/wxcx/pic.jpg" />
      <l-avatar src="https://img.learun.cn/wxcx/pic.jpg" round />
      <l-avatar src="https://img.learun.cn/wxcx/pic.jpg" radius />
    </view>
    <l-demo-description>
      头像使用 l-avatar 标签，属性 src="*" 可以设置头像图片的资源路径；
      添加 round 属性将使头像变成圆形，添加 radius 属性可以使头像变成圆角
    </l-demo-description>

    <l-title>文字/图标头像：</l-title>
    <view class="padding flex flex-wrap justify-around">
      <l-avatar color="red" round>A</l-avatar>
      <l-avatar color="blue" round>sn</l-avatar>
      <l-avatar color="green" radius>魏</l-avatar>
      <l-avatar color="brown" radius><l-icon type="likefill" /></l-avatar>
    </view>
    <l-demo-description>
      也可以使用文字或图标作为头像的内容，将文字或图标放置于头像标签内即可；
      添加 color="*" 属性可以设置头像的背景颜色
    </l-demo-description>

    <l-title>头像尺寸：</l-title>
    <view class="padding flex flex-wrap justify-around">
      <l-avatar size="sm" radius>sm</l-avatar>
      <l-avatar size="df" radius>df</l-avatar>
      <l-avatar size="lg" radius>lg</l-avatar>
      <l-avatar size="xl" radius>xl</l-avatar>
    </view>
    <l-demo-description>
      添加 size="*" 属性即可设置头像大小，把*替换成上面的尺寸字符串之一(改成小写)
    </l-demo-description>

    <l-title>头像背景色：</l-title>
    <view
      class="padding flex flex-wrap"
      style="background-color: #DDDDDD;"
    >
      <l-avatar
        v-for="(item, index) in colors"
        :key="index"
        :color="item.name"
        size="lg"
        class="margin-xs"
        radius
      >
        <text style="font-size: 0.4em;">{{ item.name }}</text>
      </l-avatar>
    </view>
    <l-demo-description>
      添加 color="*" 属性可以设置头像的背景颜色，把*替换成上面的颜色英文名即可
    </l-demo-description>

    <l-title>头像角标：</l-title>
    <view class="padding flex flex-wrap justify-around">
      <l-avatar src="https://img.learun.cn/wxcx/pic.jpg">
        <l-tag slot="badge" color="red" badge round>5</l-tag>
      </l-avatar>

      <l-avatar size="lg" src="https://img.learun.cn/wxcx/pic.jpg">
        <l-tag slot="badge" color="red" badge round><l-icon type="like" /></l-tag>
      </l-avatar>

      <l-avatar size="lg" src="https://img.learun.cn/wxcx/pic.jpg">
        <l-tag slot="badge" color="blue" badge round>完成</l-tag>
      </l-avatar>
    </view>
    <l-demo-description>
      在头像标签内放置 l-tag 标签，并给内部的这个标签添加 badge 属性，即可设置头像角标
    </l-demo-description>
  </view>
</template>

<script>
export default {
  data() {
    return { colors: this.getUiColors() }
  }
}
</script>