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

137 lines
2.1 KiB
Markdown
Raw Normal View History

::: anchor
:::
2021-10-26 01:13:23 +08:00
::: title 基础使用
2021-10-19 22:28:44 +08:00
:::
2022-02-01 23:26:28 +08:00
::: demo 使用 `lay-avatar` 标签, 创建头像
2021-10-01 20:22:49 +08:00
<template>
<lay-avatar :src="src"></lay-avatar>
2021-10-01 20:22:49 +08:00
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const src = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
2021-10-01 20:22:49 +08:00
return {
src
2021-10-01 20:22:49 +08:00
}
}
}
</script>
:::
2021-10-26 01:13:23 +08:00
::: title 圆角头像
2021-10-19 22:28:44 +08:00
:::
2021-10-01 20:22:49 +08:00
::: demo
<template>
<lay-avatar :src="src" radius></lay-avatar>
2021-10-01 20:22:49 +08:00
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
2021-10-01 20:22:49 +08:00
return {
src
2021-10-01 20:22:49 +08:00
}
}
}
</script>
:::
2021-10-26 01:13:23 +08:00
::: title 尺寸大小
2021-10-19 22:28:44 +08:00
:::
2021-10-01 20:22:49 +08:00
::: demo
<template>
<lay-avatar :src="src" size="xs"></lay-avatar>
2022-01-09 22:41:56 +08:00
&nbsp;&nbsp;
<lay-avatar :src="src" size="sm"></lay-avatar>
2022-01-09 22:41:56 +08:00
&nbsp;&nbsp;
<lay-avatar :src="src"></lay-avatar>
2022-01-09 22:41:56 +08:00
&nbsp;&nbsp;
<lay-avatar :src="src" size="lg"></lay-avatar>
2021-10-01 20:22:49 +08:00
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
2021-10-01 20:22:49 +08:00
return {
2021-11-07 15:55:08 +08:00
src
2021-10-01 20:22:49 +08:00
}
}
}
</script>
2021-10-01 20:22:49 +08:00
:::
2022-01-09 22:41:56 +08:00
::: title 头像列表
:::
::: demo
<template>
<lay-avatar-list>
<lay-avatar :src="src" radius></lay-avatar>
<lay-avatar :src="src" radius></lay-avatar>
<lay-avatar :src="src" radius></lay-avatar>
<lay-avatar :src="src" radius></lay-avatar>
<lay-avatar :src="src" radius></lay-avatar>
</lay-avatar-list>
</template>
<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>
:::
2022-01-10 01:17:03 +08:00
::: title Avatar 属性
:::
2021-10-12 18:00:09 +08:00
2021-11-07 15:55:08 +08:00
::: table
| 属性 | 描述 | 可选值 |
| ------ | ---- | -------------- |
| src | 图源 | -- |
| size | 尺寸 | `xs` `sm` `lg` |
| radius | 圆形 | `true` `false` |
2021-11-07 15:55:08 +08:00
2021-11-07 15:56:24 +08:00
:::
2021-12-16 17:57:59 +08:00
::: comment
2022-01-09 22:41:56 +08:00
:::
2022-01-12 14:22:53 +08:00
::: previousNext avatar
:::