layui/example/docs/zh-CN/components/avatar.md

::: anchor :::

::: title 基本介绍 :::

::: describe 用来代表用户或事物，支持图片、图标或字符展示。 :::

::: title 基础使用 :::

::: demo 使用 lay-avatar 标签, 创建头像

<script> import { ref } from 'vue' export default { setup() { const src = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png") return { src } } } </script>

:::

::: title 圆角头像 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" return { src } } } </script>

:::

::: title 尺寸大小 :::

::: demo

         <script> import { ref } from 'vue' export default { setup() { const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" return { src } } } </script>

:::

::: title 头像列表 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" return { src } } } </script>

:::

::: title Avatar 属性 :::

::: table

属性	描述	可选值
src	图源	--
size	尺寸	xs sm lg
radius	圆形	true false

:::

::: comment :::

::: previousNext avatar :::