Vue3头像（Avatar）

置顶 theMuseCatcher

已于 2024-11-01 09:27:50 修改

阅读量2.3k

点赞数 1

分类专栏： TypeScript Less Vue3 文章标签： vue3 typescript components

于 2023-08-15 14:49:29 首次发布

本文链接：https://blog.csdn.net/Dandrose/article/details/132298721

版权

Vue3 同时被 3 个专栏收录

81 篇文章 13 订阅

订阅专栏

TypeScript

80 篇文章 4 订阅

订阅专栏

Less

74 篇文章 3 订阅

订阅专栏

效果如下图：

在这里插入图片描述

在线预览

APIs

Avatar

参数	说明	类型	默认值
color	头像的背景色	string	‘rgba(0, 0, 0, 0.25)’
shape	指定头像的形状	‘circle’ \| ‘square’	‘circle’
size	设置头像的大小，`number`类型时单位 `px`	number \| ‘small’ \| ‘middle’ \| ‘large’ \| Responsive	‘middle’
src	图片类头像资源地址	string	undefined
alt	图片无法显示时的替代文本	string	undefined
icon	设置头像的图标	VNode \| slot	undefined
href	点击跳转的地址，指定此属性按钮的行为和 `a` 链接一致	string	undefined
target	相当于 `a` 标签的 `target` `属性，href` 存在时生效	‘self’ \| ‘_blank’	‘self’

Responsive Type

名称	说明	类型	默认值
xs	`<576px` 响应式栅格	number	undefined
sm	`≥576px` 响应式栅格	number	undefined
md	`≥768px` 响应式栅格	number	undefined
lg	`≥992px` 响应式栅格	number	undefined
xl	`≥1200px` 响应式栅格	number	undefined
xxl	`≥1600px` 响应式栅格	number	undefined

其中引入使用了工具函数：throttle 节流、useEventListener 监听事件

创建头像组件Avatar.vue

其中引入使用了以下工具函数：

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { VNode, Slot } from 'vue'
import { useEventListener, useSlotsExist } from '../utils'
interface Responsive {
  xs?: number // <576px 响应式栅格
  sm?: number // ≥576px 响应式栅格
  md?: number // ≥768px 响应式栅格
  lg?: number // ≥992px 响应式栅格
  xl?: number // ≥1200px 响应式栅格
  xxl?: number // ≥1600px 响应式栅格
}
interface Props {
  color?: string // 头像的背景色
  shape?: 'circle' | 'square' // 指定头像的形状
  size?: number | 'small' | 'middle' | 'large' | Responsive // 设置头像的大小，number 类型时单位 px
  src?: string // 图片类头像资源地址
  alt?: string // 图片无法显示时的替代文本
  icon?: VNode | Slot // 设置头像的图标
  href?: string // 点击跳转的地址，指定此属性按钮的行为和 a 链接一致
  target?: '_self' | '_blank' // 相当于 a 标签的 target 属性，href 存在时生效
}
const props = withDefaults(defineProps<Props>(), {
  color: 'rgba(0, 0, 0, 0.25)',
  shape: 'circle',
  size: 'middle',
  src: undefined,
  alt: undefined,
  icon: undefined,
  href: undefined,
  target: '_self'
})
const viewportWidth = ref(window.innerWidth)
function getViewportWidth() {
  viewportWidth.value = window.innerWidth
}
useEventListener(window, 'resize', getViewportWidth)
const slotsExist = useSlotsExist(['default', 'icon'])
const showIcon = computed(() => {
  if (!props.src) {
    return Boolean(slotsExist.icon || props.icon)
  }
  return false
})
const avatarStyle = computed(() => {
  if (typeof props.size === 'number') {
    if (showIcon.value) {
      return {
        backgroundColor: props.color,
        width: `${props.size}px`,
        height: `${props.size}px`,
        lineHeight: `${props.size}px`,
        fontSize: `${props.size / 2}px`
      }
    } else {
      return {
        backgroundColor: props.color,
        width: `${props.size}px`,
        height: `${props.size}px`,
        lineHeight: `${props.size}px`,
        fontSize: '18px'
      }
    }
  }
  if (typeof props.size === 'object') {
    let size = 32
    if (viewportWidth.value >= 1600 && props.size.xxl) {
      size = props.size.xxl
    } else if (viewportWidth.value >= 1200 && props.size.xl) {
      size = props.size.xl
    } else if (viewportWidth.value >= 992 && props.size.lg) {
      size = props.size.lg
    } else if (viewportWidth.value >= 768 && props.size.md) {
      size = props.size.md
    } else if (viewportWidth.value >= 576 && props.size.sm) {
      size = props.size.sm
    } else if (viewportWidth.value < 576 && props.size.xs) {
      size = props.size.xs
    }
    return {
      backgroundColor: props.color,
      width: `${size}px`,
      height: `${size}px`,
      lineHeight: `${size}px`,
      fontSize: `${size / 2}px`
    }
  }
  return {
    backgroundColor: props.color
  }
})
const showStr = computed(() => {
  if (!props.src && !showIcon.value) {
    return slotsExist.default
  }
  return false
})
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%)`
    }
  }
  return {}
})
</script>
<template>
  <component
    :is="href ? 'a' : 'div'"
    class="m-avatar"
    :class="[
      `avatar-${shape}`,
      {
        [`avatar-${size}`]: typeof size === 'string' && ['small', 'middle', 'large'].includes(size),
        'avatar-image': src,
        'avatar-link': href
      }
    ]"
    :style="avatarStyle"
    :href="href"
    :target="target"
  >
    <img v-if="src" class="image-item" :src="src" :alt="alt" />
    <slot v-if="!src && showIcon" name="icon">
      <component :is="icon" />
    </slot>
    <span v-if="!src && !showIcon && showStr" class="string-item" :style="strStyle">
      <slot></slot>
    </span>
  </component>
</template>
<style lang="less" scoped>
.m-avatar {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  color: #fff;
  line-height: 30px;
  border: 1px solid transparent;
  overflow: hidden;
  white-space: nowrap;
  cursor: auto;
  outline: none;
  &:hover {
    color: #fff;
  }
  &.avatar-square {
    border-radius: 6px;
  }
  .image-item {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  :deep(svg) {
    width: 1em;
    height: 1em;
    fill: currentColor;
  }
  .string-item {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
  }
}
.avatar-small {
  font-size: 14px;
  width: 24px;
  height: 24px;
  line-height: 22px;
  border-radius: 50%;
  .avatar-icon {
    font-size: 14px;
  }
  &.avatar-square {
    border-radius: 4px;
  }
}
.avatar-middle {
  .avatar-icon {
    font-size: 18px;
  }
}
.avatar-large {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 50%;
  .avatar-icon {
    font-size: 24px;
  }
  &.avatar-square {
    border-radius: 8px;
  }
}
.avatar-image {
  background: transparent;
}
.avatar-link {
  cursor: pointer;
}
</style>

在要使用的页面引入

其中引入使用了以下组件：

<script setup lang="ts">
import Avatar from './Avatar.vue'
import { h } from 'vue'
import { UserOutlined, TeamOutlined, SketchOutlined } from '@ant-design/icons-vue'
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Space vertical>
      <Space align="center">
        <Avatar :size="64">
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
        <Avatar size="large">
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
        <Avatar>
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
        <Avatar size="small">
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
      </Space>
      <Space align="center">
        <Avatar shape="square" :size="64">
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
        <Avatar shape="square" size="large">
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
        <Avatar shape="square">
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
        <Avatar shape="square" size="small">
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
      </Space>
    </Space>
    <h2 class="mt30 mb10">自定义背景色</h2>
    <Space>
      <Avatar color="#1677ff">
        <template #icon>
          <UserOutlined />
        </template>
      </Avatar>
      <Avatar color="#ff6900" shape="square">
        <template #icon>
          <UserOutlined />
        </template>
      </Avatar>
      <Avatar color="#87d068">
        <template #icon>
          <UserOutlined />
        </template>
      </Avatar>
    </Space>
    <h2 class="mt30 mb10">自定义图标类型</h2>
    <Space align="center">
      <Avatar :icon="() => h(TeamOutlined)" />
      <Avatar>
        <template #icon>
          <UserOutlined />
        </template>
      </Avatar>
      <Avatar>U</Avatar>
      <Avatar :size="40">USER</Avatar>
      <Avatar :size="40" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/1.jpg" />
      <Avatar style="color: #f56a00; background-color: #fde3cf">U</Avatar>
    </Space>
    <h2 class="mt30 mb10">带徽标的头像</h2>
    <Space>
      <Badge :value="1">
        <Avatar shape="square">
          <template #icon>
            <UserOutlined />
          </template>
        </Avatar>
      </Badge>
      <Badge dot>
        <Avatar shape="square">
          <template #icon>
            <UserOutlined />
          </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>
        <SketchOutlined />
      </template>
    </Avatar>
    <h2 class="mt30 mb10">链接跳转</h2>
    <Tooltip tooltip="themusecatcher@github">
      <Avatar
        :size="36"
        src="https://github.com/themusecatcher.png"
        href="https://github.com/themusecatcher"
        target="_blank"
      />
    </Tooltip>
  </div>
</template>