Cool UI

📓组件介绍

cl-avatar对a-avatar做了基本的封装。

  1. 优化了默认头像的处理。对于src为空或者src加载失败的场景，自动fallback为defaultUrl。
  2. 同时也简化了onError等场景的fallback处理。

⌨️代码演示

基本使用

A
<cl-avatar />
1
<cl-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
1

在多租户场景中，优先展示用户头像，同时获取租户logo，作为默认头像（通过default-url属性绑定）。

<template>
    <cl-avatar :default-url="tenantLogo" :src="userAvatar" />
</template>

<script setup>
// 这里仅是示例用法，实际怎么取值应该根据项目实际情况决定

// 取租户logo，通过 defaultUrl 属性作为fallback
const store = useStore(key)
const tenantLogo = store.getters["tenant/tenantLogo"]

// 取用户头像
const userAvatar = store.getters["user/userAvatar"]
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

📖属性

属性说明类型默认值
defaultUrl头像 src 的默认值string-

其他属性见Avatar Props。