程序员经验分享-hwhale

Vue3头像（Avatar）

2023-11-11

效果如下图：在线预览

在这里插入图片描述

APIs

参数 说明 类型 默认值 必传
shape 指定头像的形状 ‘circle’ | ‘square’ ‘circle’ false
size 设置头像的大小 number | ‘large’ | ‘small’ | ‘default’ | Responsive ‘default’ false
src 图片类头像资源地址 string ‘’ false
alt 图片无法显示时的替代文本 string ‘’ false
icon 设置头像的图标 slot undefined false

Responsive Type

名称 说明 类型 必传
xs <576px 响应式栅格 number false
sm ≥576px 响应式栅格 number false
md ≥768px 响应式栅格 number false
lg ≥992px 响应式栅格 number false
xl ≥1200px 响应式栅格 number false
xxl ≥1600px 响应式栅格 number false

创建头像组件Avatar.vue

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import type { Slot } from 'vue'
interface Responsive {
  xs?: number // <576px 响应式栅格
  sm?: number // ≥576px 响应式栅格
  md?: number // ≥768px 响应式栅格
  lg?: number // ≥992px 响应式栅格
  xl?: number // ≥1200px 响应式栅格
  xxl?: number // ≥1600px 响应式栅格
}
interface Props {
  shape?: 'circle'|'square' // 指定头像的形状
  size?: number|'large'|'small'|'default'|Responsive // 设置头像的大小
  src?: string // 图片类头像资源地址
  alt?: string // 图片无法显示时的替代文本
  icon?: Slot // 设置头像的图标
}
const props = withDefaults(defineProps<Props>(), {
  shape: 'circle',
  size: 'default',
  src: '',
  alt: '',
  icon: undefined
})
const clientWidth = ref(document.documentElement.clientWidth)
const iconRef = ref()
const showIcon = ref(1)
const strRef = ref()
const showStr = ref(1)
onMounted(() => {
  window.addEventListener('resize', getBrowserSize)
  if (!props.src) {
    showIcon.value = iconRef.value.offsetHeight
    nextTick(() => {
      if (!showIcon.value) {
        showStr.value = strRef.value.offsetHeight
      }
    })
  }
})
onUnmounted(() => {
  window.removeEventListener('resize', getBrowserSize)
})
function getBrowserSize () {
  // document.documentElement返回<html>元素
  clientWidth.value = document.documentElement.clientWidth
}
const avatarStyle = computed(() => {
  if (typeof props.size === 'string') {
    return null
  }
  if (typeof props.size === 'number') {
    if (showIcon.value) {
      return {
        width: props.size + 'px',
        height: props.size + 'px',
        lineHeight: props.size + 'px',
        fontSize: (props.size as number / 2) + 'px'
      }
    } else {
      return {
        width: props.size + 'px',
        height: props.size + 'px',
        lineHeight: props.size + 'px',
        fontSize: '18px'
      }
    }
  }
  if (typeof props.size === 'object') {
    let size = 32
    if (clientWidth.value >= 1600 && props.size.xxl) {
      size = props.size.xxl
    } else if (clientWidth.value >= 1200 && props.size.xl) {
      size = props.size.xl
    } else if (clientWidth.value >= 992 && props.size.lg) {
      size = props.size.lg
    } else if (clientWidth.value >= 768 && props.size.md) {
      size = props.size.md
    } else if (clientWidth.value >= 576 && props.size.sm) {
      size = props.size.sm
    } else if (clientWidth.value < 576 && props.size.xs) {
      size = props.size.xs
    }
    return {
      width: size + 'px',
      height: size + 'px',
      lineHeight: size + 'px',
      fontSize: (size / 2) + 'px'
    }
  }
})
const strStyle = computed(() => {
  if (typeof props.size === 'string') {
    return {
      transform: `scale(1) translateX(-50%)`
    }
  }
  if (typeof props.size === 'number') {
    const scale = Math.min(1, Math.max(1/45, (1 + (props.size - 9) * 1) / 45))
    return {
      lineHeight: props.size + 'px',
      transform: `scale(${scale}) translateX(-50%)`
    }
  }
})
</script>
<template>
  <div
    class="m-avatar"
    :class="[avatarStyle === null ? 'avatar-' + size: '', 'avatar-' + shape, {'avatar-image': src}]"
    :style="avatarStyle || {}">
    <img class="u-image" :src="src" :alt="alt" v-if="src" />
    <span class="m-icon" ref="iconRef" v-if="!src && showIcon">
      <slot name="icon"></slot>
    </span>
    <span class="m-string" :style="strStyle" ref="strRef" v-if="!src && !showIcon && showStr">
      <slot></slot>
    </span>
  </div>
</template>
<style lang="less" scoped>
.m-avatar {
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background: rgba(0, 0, 0, .25);
  border: 1px solid transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  &.avatar-square {
    border-radius: 6px;
  }
  .u-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .m-icon {
    display: inline-flex;
    align-items: center;
    color: inherit;
    line-height: 0;
    text-align: center;
    vertical-align: -0.125em;
  }
  .m-string {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
  }
}
.avatar-large {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 50%;
  .m-icon {
    font-size: 24px;
  }
  &.avatar-square {
    border-radius: 8px;
  }
}
.avatar-default {
  .m-icon {
    font-size: 18px;
  }
}
.avatar-small {
  font-size: 14px;
  width: 24px;
  height: 24px;
  line-height: 22px;
  border-radius: 50%;
  .m-icon {
    font-size: 14px;
  }
  &.avatar-square {
    border-radius: 4px;
  }
}
.avatar-image {
  background: transparent;
}
</style>

在要使用的页面引入

其中引入使用了 Vue3间距（Space）、Vue3徽标数（Badge）

<script setup lang="ts">
import Avatar from './Avatar.vue'
import Space from './Space.vue'
import Badge from './Badge.vue'
</script>
<template>
  <div>
    <h1>Avatar 头像</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Space :size="16" align="center">
      <Avatar :size="64">
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></template>
      </Avatar>
      <Avatar size="large">
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
      <Avatar>
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
      <Avatar size="small">
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
    </Space>
    <br />
    <br />
    <Space :size="16" align="center">
      <Avatar shape="square" :size="64">
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
      <Avatar shape="square" size="large">
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
      <Avatar shape="square">
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
      <Avatar shape="square" size="small">
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
    </Space>
    <h2 class="mt30 mb10">三种类型：图片、Icon 以及字符</h2>
    <Space :size="16" align="center">
      <Avatar>
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
      <Avatar>U</Avatar>
      <Avatar :size="40">USER</Avatar>
      <Avatar :size="40" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" />
      <Avatar style="color: #f56a00; background-color: #fde3cf">U</Avatar>
      <Avatar style="background-color: #87d068">
        <template #icon>
          <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
      </Avatar>
    </Space>
    <h2 class="mt30 mb10">带徽标的头像</h2>
    <Space :size="16">
      <Badge :count="1">
        <Avatar shape="square">
          <template #icon>
            <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
          </template>
        </Avatar>
      </Badge>
      <Badge dot>
        <Avatar shape="square">
          <template #icon>
            <svg focusable="false" class="u-icon" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
          </template>
        </Avatar>
      </Badge>
    </Space>
    <h2 class="mt30 mb10">响应式尺寸</h2>
    <Avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
      <template #icon>
        <svg focusable="false" class="u-icon" data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg>
      </template>
    </Avatar>
  </div>
</template>
<style lang="less" scoped>
.u-icon {
  display: inline-block;
  fill: #fff;
}
</style>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

TS

Less

vue3

typescript

Components

Vue3头像（Avatar） 的相关文章

随机推荐

  • Python爬虫常见HTTP状态码及解决方案

    爬虫工程师在数据采集过程中 不可避免地会遇到各种各样的问题 我们需要快速地对HTTP请求返回的各种异常状态码来判断处理 以便于我们及时调整爬虫策略 优化思路 及时完成作业 正常情况下 在使用代理IP时会出现以下错误状态码 一 代理链接失败

  • vue3使用高德地图，自定义点标记、默认点聚合样式、点击点标记获取信息

    1 需求 根据不用的类型和经纬度展示不同的自定义点标记 点标记太多 使用点聚合优化 参考 https blog csdn net qq 39157025 article details 120287561 2 在index html使用CD

  • Java学习笔记18——接口

    接口 接口概述 接口的特点 新建接口 创建一个实现类 Demo测试 总结 接口的成员特点 成员变量 构造方法 成员方法 类和接口的关系 类和类的关系 类和接口的关系 接口和接口之间的关系 抽象类与接口之间的区别 成员区别 关系区别 设计理念

  • c#基础知识---集合之队列

    队列 Queue 代表了一个先进先出的对象集合 当您需要对各项进行先进先出的访问时 则使用队列 当您在列表中添加一项 称为入队 当您从列表中移除一项时 称为出队 Queue 类的方法和属性 下表列出了 Queue 类的一些常用的 属性 属性

  • MySQL进阶(终篇)

    无知的我正在复习MySQL进阶知识 笔记特点是 我重新整理了涉及资料的一些语言描述 排版 而使用了自己比较容易理解的描述 同样是回答了一些常见关键问题 如果有遇到有任何无法进展问题或者疑惑的地方 应该在讨论区留言 或者 其他途径以寻求及时的

  • [开发工具使用基础-vs2013] 增加外部文件到项目工程

    此文适合于在vs2013中入门C 编程的人员借鉴 主要功能是添加外部文件 比如你网上下载的 cpp文件和 h头文件 到本项目工程 过程演示 1 新建一个C 空项目NewProgram 项目名自取 对于你的话就是你自己的项目了 完成后解决方案

  • Unity资源管理——使用UnityWebRequest从云端下载Assetbundle包

    1 环境 基于Unity2018 2 2 思路 1 使用UnityWebRequest Get方法去获取AB包 2 在协程中返回UnityWebRequest实例对象的SendWebRequest方法返回值 3 当UnityWebReque

  • wpf 保存图片到任意格式jpg,png,bmp

    private void ExportBtn Click object sender RoutedEventArgs e SaveFileDialog saveFileDialog new SaveFileDialog saveFileDi

  • nodejs中文教程-windows下nodejs开发环境的安装与配置

    么是Node js 还服务器端javascript 对于这个概念我在这篇文章不做解释 可以自己去搜索了解下 服务器端js不是新技术 只是最近的node js的火爆让他爆发了 我会在以后的文章里解释什么是node js 这里只是纯粹的搭建 连

  • HarmoneyOS鸿蒙系统零代码编程入门

    文章目录 前言 学习资源网址 工具以及基本环境准备 搭建HarmonyOS项目 申请成为华为开发者 实现 您好 世界 入门程序 前言 2021年6月3日 华为终于推出了HarmoneyOS 即鸿蒙操作系统公测 着实振奋人心 分布式操作系统

  • Linux学习篇 1.Linux的磁盘规划

    历时1个月的学习 对Linux终于小有了解 初步可以做些操作了 同时对Linux有了更深的理解 以前没接触的时候觉得高不可攀 经过一段时间的学习才发现 原来也没想象中的那么难 哈哈 独乐乐不如群乐乐 下面是我以做笔记的方式写的文章 有些生硬

  • 用py写一个时间盲注的脚本（初学向）

    用py写一个时间盲注的脚本 1 首先我们要清楚时间盲注的特点是利用了sql中sleep这个函数 借助的是响应时间不同来判断构造语句的对错 那么我们主要思路就要通过记录响应时间来执行一系列操作 下面是我写的一个简单脚本 2 import re

  • 告诉你如何应对HR索要薪资证明！

    有些企业的HR会要求求职者提供薪资证明 尤其是对于 骑驴找马 的求职者 HR不便于进行背景调查 更倾向于让求职者提供薪资证明 面对这种情况 根据前程无忧论坛的调查数据显示 有26 的受访者愿意提供薪资证明 其余的受访者要么拒绝提供 要么直接

  • 基于SpringBoot开发的停车位管理系统（调用百度地图api）

    文章目录 项目介绍 主要功能截图 前台 后台 部分代码展示 设计总结 项目获取方式 作者主页 超级无敌暴龙战士塔塔开 简介 Java领域优质创作者 简历模板 学习资料 面试题库 关注我 都给你 文末获取源码联系 项目介绍 基于SpringB

  • spring security免登录动态配置方案2

    序 之前有篇文章讲了怎么进行免登录动态配置的方案 动用了反射去实现 有点黑魔法的味道 这里再介绍另外一种方案 permitAll spring security config 4 2 3 RELEASE sources jar org sp

  • 巴菲特致股东的一封信：2011年

    原文请参考 http www berkshirehathaway com letters 2014ltr pdf 学习心得 全文如下 致伯克希尔哈萨维的股东 2011年我们的A股和B股每股账面价值增长了4 6 在过去47年 即现任管理层就职

  • C语言指针

    1 指针的概念 C程序中变量的值都是存储在计算机内存特定的储存单元中的 内存中的每个单元都有唯一的的地址 就像街区中的房子都有唯一的地址 宾馆中的房间都有唯一的编号一样 那么如何获取这个地址呢 这就要用到取地址运算符 即 计算机把整个内存条

  • Unity的C#编程教程_39_循环语句挑战：计数程序

    设计一个累计程序 每3秒钟计数 1 达到一个随机生成的上限时 累计停止 方法一 using System Collections using System Collections Generic using UnityEngine publ

  • 基于STM32的0.96寸OLED屏滚动显示长字符

    文章目录 一 OLED屏的滚屏命令 1 1 禁用滚动 2Eh 1 2 启用滚动 2Fh 1 3 设置水平左右滚动 1 4 设置垂直和水平滚动 二 使用OLED屏滚动显示长字符 1 对显示文字进行取模 2 main函数 3 显示长字符函数 4

  • Vue3头像（Avatar）

    效果如下图 在线预览 APIs 参数 说明 类型 默认值 必传 shape 指定头像的形状 circle square circle false size 设置头像的大小 number large small default Respons

热门标签