Avatar 头像 ​

<script lang="ts" setup>
  import { reactive, toRefs } from 'vue'

  const state = reactive({
    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large'] as const
  })

  const { circleUrl, squareUrl, sizeList } = toRefs(state)
</script>
<template>
  <fz-row class="demo-avatar demo-basic">
    <fz-col :span="12">
      <div class="sub-title">circle</div>
      <div class="demo-basic--circle">
        <div class="block">
          <fz-avatar :size="50" :src="circleUrl" />
        </div>
        <div v-for="size in sizeList" :key="size" class="block">
          <fz-avatar :size="size" :src="circleUrl" />
        </div>
      </div>
    </fz-col>
    <fz-col :span="12">
      <div class="sub-title">square</div>
      <div class="demo-basic--circle">
        <div class="block">
          <fz-avatar shape="square" :size="50" :src="squareUrl" />
        </div>
        <div v-for="size in sizeList" :key="size" class="block">
          <fz-avatar shape="square" :size="size" :src="squareUrl" />
        </div>
      </div>
    </fz-col>
  </fz-row>
</template>

<style scoped>
  .demo-basic {
    text-align: center;
  }
  .demo-basic .sub-title {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--fz-text-color-secondary);
  }
  .demo-basic .demo-basic--circle,
  .demo-basic .demo-basic--square {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .demo-basic .block:not(:last-child) {
    border-right: 1px solid var(--fz-border-color);
  }
  .demo-basic .block {
    flex: 1;
  }
  .demo-basic .fz-col:not(:last-child) {
    border-right: 1px solid var(--fz-border-color);
  }
</style>

<script setup lang="ts">
  import { IconUser } from '@fz-design/fz-design-icon'
</script>

<template>
  <div class="demo-type">
    <div>
      <fz-avatar :icon="IconUser" />
    </div>
    <div>
      <fz-avatar
        src="https://picx.zhimg.com/80/v2-f73ed744fca5c0269fb73e164b780021_1440w.webp?source=1940ef5c"
      />
    </div>
    <div>
      <fz-avatar> user </fz-avatar>
    </div>
  </div>
</template>

<style scoped>
  .demo-type {
    display: flex;
  }
  .demo-type > div {
    flex: 1;
    text-align: center;
  }

  .demo-type > div:not(:last-child) {
    border-right: 1px solid var(--fz-border-color);
  }
</style>

<script lang="ts" setup>
  const errorHandler = (): void => undefined
</script>

<template>
  <div class="demo-type">
    <fz-avatar :size="60" src="https://empty" @error="errorHandler">
      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
    </fz-avatar>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, toRefs } from 'vue'

  const state = reactive({
    fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
    url: 'https://picx.zhimg.com/80/v2-f73ed744fca5c0269fb73e164b780021_1440w.webp?source=1940ef5c'
  })

  const { fits, url } = toRefs(state)
</script>
<template>
  <div class="demo-fit">
    <div v-for="fit in fits" :key="fit" class="block">
      <span class="title">{{ fit }}</span>
      <fz-avatar shape="square" :size="100" :fit="fit" :src="url" />
    </div>
  </div>
</template>

<style scoped>
  .demo-fit {
    display: flex;
    text-align: center;
    justify-content: space-between;
  }
  .demo-fit .block {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
  }

  .demo-fit .title {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--fz-text-color-secondary);
  }
</style>