Avatar 头像

头像组件

基础用法

基础用法

徐然

<template>
    <LiAvatar name="徐然" bgcolor="#ccc"></LiAvatar>
</template>
<script setup lang="ts">

</script>
<style scope lang="scss"></style>

收起

大小

大小使用size操作

徐然徐然徐然

<template>
    <LiAvatar name="徐然" bg-color="#ccc" size="small" round></LiAvatar>
    <LiAvatar name="徐然" bg-color="#ccc" size="middle" round></LiAvatar>
    <LiAvatar name="徐然" bg-color="#ccc" size="large" round></LiAvatar>
</template>
<script setup lang="ts">

</script>
<style scope lang="scss"></style>

收起

颜色

颜色使用bg-color、name-color操作

徐然徐然徐然

<template>
    <LiAvatar name="徐然" bg-color="red" name-color="white" round></LiAvatar>
    <LiAvatar name="徐然" bg-color="blue" name-color="white" round></LiAvatar>
    <LiAvatar name="徐然" bg-color="yellow" name-color="#000" round></LiAvatar>
</template>
<script setup lang="ts">

</script>
<style scope lang="scss"></style>

收起

图片链接

使用src操作

<template>
    <LiAvatar bg-color="#ccc" :src="link" round>
    </LiAvatar>
    <LiAvatar bg-color="#ccc" src="asdasdasd" round>
    </LiAvatar>
</template>
<script setup lang="ts">
    const link = "https://camo.githubusercontent.com/09360abae70421908e1a51ed4cdb75bdb4d11fbfd8d37739284bd994aec901d0/68747470733a2f2f73332e626d702e6f76682f696d67732f323032342f30382f32382f313336616238313361653965306535662e706e67"
</script>
<style scope lang="scss"></style>

收起

Avatar Attributes

参数	说明	类型	可选值	默认值
size	大小	string	small/middle/large	middle
bg-color	背景颜色	string
name-color	文字颜色	string
src	源图片	string
round	是否为圆型	boolean		false
style-img	图片样式	CSSPrototype