Vue3头像（Avatar）

news2024/11/25 4:56:54

效果如下图：在线预览

在这里插入图片描述

APIs

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

Responsive Type

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

创建头像组件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 = 0
    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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/881970.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

关于微信临时文件wxfile://tmp文件如何处理，微信小程序最新获取头像和昵称

关于微信临时文件wxfile://tmp文件如何处理，微信小程序最新获取头像和昵称

分享-2023年资深前端进阶&#xff1a;前端登顶之巅-最全面的前端知识点梳理总结&#xff0c;前端之巅 *分享一个使用比较久的&#x1fa9c; 技术栈&#xff1a;taro框架 vue3版本 解决在微信小程序获取微信头像时控制台报错&#xff1a;找不着wxfile://tmp 文件路径,失败&…
阅读更多...
迁移协调器 - 就地迁移模式

迁移协调器 - 就地迁移模式

在本系列博客的第一部分中&#xff0c;我们从高层级视角介绍了 Migration Coordinator 提供的所有模式&#xff0c;Migration Coordinator 是内置于 NSX 中的完全受 GSS 支持的工具&#xff0c;可将 NSX for vSphere 迁移到 NSX (NSX-T)。 本系列的第二篇博客将详细介绍就地迁…
阅读更多...
cesium 卫星环绕扫描

cesium 卫星环绕扫描

成果图 源码 let viewer new Cesium.Viewer(cesiumContainer,{// terrainProvider: Cesium.createWorldTerrain(),geocoder: false, // 隐藏查找位置homeButton: false, // 隐藏返回视角到初始位置sceneModePicker: false, // 隐藏视角模式的选择baseLayerPicker: false, // 隐…
阅读更多...
亚马逊云科技助力珠海丹德构建安全技术底座，促进商业发展

亚马逊云科技助力珠海丹德构建安全技术底座，促进商业发展

随着消费者对商品质量和安全关注度的不断提高&#xff0c;防伪、溯源、防窜已经成为企业关注的重要领域。据前瞻产业研究院数据显示&#xff0c;2028年中国防伪行业市场容量将超过4000亿元&#xff0c;未来市场对防伪、溯源、防窜技术的需求和重视程度可见一斑。 作为一家用智慧…
阅读更多...
软件测试项目实战，电商业务功能测试点汇总（全覆盖）

软件测试项目实战，电商业务功能测试点汇总（全覆盖）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 支付功能怎么测试…
阅读更多...
医院后勤管理用什么系统好？的修医院报修管理系统有哪些优势？

医院后勤管理用什么系统好？的修医院报修管理系统有哪些优势？

随着医院后勤工作量的不断增加&#xff0c;需要协调和维护的设备和部门也随之增多。传统的医院后勤管理方式已经显得不够优越&#xff0c;其劣势日益凸显&#xff0c;无法满足实际工作需求。因此&#xff0c;快速推动医院后勤信息化管理已成为当前医院发展的迫切需求。而的修医…
阅读更多...
进销存记账软件2023排行榜，秦丝、智慧记、管家婆哪家更好用？

进销存记账软件2023排行榜，秦丝、智慧记、管家婆哪家更好用？

进销存记账软件已经成为很多实体店必备的一款软件&#xff0c;使用进销存记账软件可以帮助实体店解决手工记账效率低下、对账麻烦且出错率高等问题。 很多实体店都是小本生意&#xff0c;选择进销存记账软件时由于缺乏经验&#xff0c;随意选择&#xff0c;结果买回来之后一堆问…
阅读更多...
无人机跟随一维高度避障场景--逻辑分析

无人机跟随一维高度避障场景--逻辑分析

无人机跟随一维高度避障场景--逻辑分析 1. 源由2. 视频3. 问题3.1 思维发散3.2 问题收敛 4. 图示4.1 水平模式4.2 下坡模式4.3 上坡模式4.4 碰撞分析 5. 总结6. 参考资料 1. 源由 最近拿到一台测试样机&#xff0c;功能很多&#xff0c;就不多赘述。 这里针对跟随功能进行下吐…
阅读更多...
java面试基础 -- 方法重载 方法重写

java面试基础 -- 方法重载 方法重写

目录 重载 重写 重载 方法的重载是指在同一个类中定义多个方法, 他们具有相同的名称, 但是具有不同的参数列表, 例如: public void myMethod(int arg1) {// 方法体 }public void myMethod(int arg1, int arg2) {// 方法体 }public void myMethod(String arg1) {// 方法体 }…
阅读更多...
企业权限管理(九)-用户操作

企业权限管理(九)-用户操作

用户操作 1用户查询 UserController findAll Controller RequestMapping("/user") public class UserController {Autowiredprivate IUserService userService;RequestMapping("/findAll.do")public ModelAndView findAll() throws Exception {ModelAndVie…
阅读更多...
PMP考试通过标准是什么？

PMP考试通过标准是什么？

PMP 新考纲一共是 180道题&#xff0c;答对 108道就通过了&#xff0c;具体怎么看通过没有&#xff1f; 一、查看是否通过 1、登录PMI 官网&#xff0c;点击“Log In” 如果忘记 PMI 的账号、密码了也别着急&#xff0c;去找你报名的培训机构&#xff0c;一般报名处有记录&…
阅读更多...
C语言 — qsort 函数

C语言 — qsort 函数

介绍&#xff1a;qsort是一个库函数&#xff0c;用来对数据进行排序&#xff0c;可以排序任意类型的数据。 void qsort &#xff08;void*base&#xff0c; size_t num, size_t size, int(*compart)(const void*,constvoid*) &#xff09; qsort 具有四个参数&#xff1a; …
阅读更多...
分割等和子集——力扣416

分割等和子集——力扣416

思路：动态规划 bool canPartition(vector<int>& nums){int n=nums.size(
阅读更多...
建筑师设计师太难了，既要学BIM、无人机，还要学GIS！

建筑师设计师太难了，既要学BIM、无人机，还要学GIS！

我&#xff0c;一个平平无奇的城市规划专业&#xff08;建筑专业、路桥专业&#xff09;大学生&#xff0c;还有一年要毕业&#xff0c;很担心工作以后受到社会的毒打&#xff0c;遂问导师和学长&#xff0c;我要自学点什么技能和软件&#xff1f; 学长A&#xff1a;CAD&#x…
阅读更多...
mobile wireless network

mobile wireless network

老人家教学&#xff1a;手机设置无线网络 以我家里无线网络为例&#xff1a;FJGDWL-zeng 以苹果手机为例&#xff1a;其他手机类似操作 1&#xff09;【设置】 2&#xff09;【无线局域网】 3&#xff09;【无线局域网】列表&#xff0c;有的话&#xff0c;直接选中&#xff0…
阅读更多...
攸信技术：厦门火炬高新区产业联合会的新伙伴！

攸信技术：厦门火炬高新区产业联合会的新伙伴！

8月12日&#xff0c;2023年度厦门火炬高新区产业联合会会员大会在厦门国际会议中心酒店举行。来自火炬高新区产业联合会各领域的200余家优秀企业代表齐聚一堂&#xff0c;共商合作&#xff0c;共谋发展。 本次大会攸信技术作为新会员单位参加厦门火炬高新区产业联合会会员授牌仪…
阅读更多...
循环内的try-catch 跟循环外的try-catch有什么不一样

循环内的try-catch 跟循环外的try-catch有什么不一样

起因&#xff1a;一位面试管突然问了这么一道基础的面试题&#xff0c;反而秀了面试者一脸&#xff0c;经常用的却被问到时不知道怎么回答&#xff0c;所以我们平时在写代码的时候&#xff0c;要多注意细节跟原理。也许你不服&#xff1a;不就是先这样&#xff0c;再那样&#…
阅读更多...
spark导入doris的几种方式

spark导入doris的几种方式

本文主要介绍通过spark导入doris的3种方式。 1.最简单的方式&#xff1a;jdbc jdbc 方式需要引入mysql-connector-java的依赖 <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.48</…
阅读更多...
案例18 基于Spring Boot+MyBatis的图书信息维护案例

案例18 基于Spring Boot+MyBatis的图书信息维护案例

一、案例需求 基于Spring BootMyBatis实现图书信息的新增、修改、删除、查询功能&#xff0c;并实现MySQL数据库的操作。 MySQL数据库创建图书表&#xff08;t_book&#xff09;&#xff0c;图书表有主键、图书名称、图书类别、作者、出版社、简介信息。 二、数据初始化 创建…
阅读更多...
“继承与组合：代码复用的两种策略“

“继承与组合：代码复用的两种策略“

White graces&#xff1a;个人主页 &#x1f439;今日诗词:"故人陆续凋零&#xff0c;好似风中落叶啊"&#x1f439; &#x1f649; 内容推荐:“掌握类与对象&#xff0c;点亮编程之路“(下)&#x1f649; &#x1f649;专栏推荐:“Java入门指南&#xff1a;从零开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023