Tuniao UI Uniapp V3

Appearance

12:13

TnAvatar-头像 ​

本组件用于展示头像和头像组的地方，如个人中心，访问用户列表等。

组件位置 ​

typescript
import TnAvatar from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue'
import TnAvatarGroup from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar-group.vue'
import TnAvatar from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue'
import TnAvatarGroup from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar-group.vue'
typescript
import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
import TnAvatarGroup from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar-group.vue'
import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
import TnAvatarGroup from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar-group.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

如果是使用url设置头像地址需要使用绝对地址和网络图片

vue
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />

设置头像样式 ​

  • type值可选的有primary、success、warning、danger、info，默认为空，即默认头像
  • 通过size参数来修改头像的大小，可选值为sm、lg、xl，也可以传递指定的大小尺寸，默认单位为 rpx，接受传入带单位的参数
  • 通过shape设置头像的形状
  • 通过bg-color设置头像背景颜色
  • 通过border设置是否显示头像边框
  • 通过border-color设置头像边框颜色，需要将border设置为true
  • 通过shadow设置头像是否显示阴影
  • 通过shadow-color设置头像阴影颜色，需要将shadow设置为true
vue
<TnAvatar icon="logo-tuniao" type="primary" />
<TnAvatar icon="logo-tuniao" type="success" />
<TnAvatar icon="logo-tuniao" type="warning" />
<TnAvatar icon="logo-tuniao" type="danger" />
<TnAvatar icon="logo-tuniao" type="info" />
<TnAvatar icon="logo-tuniao" type="primary" />
<TnAvatar icon="logo-tuniao" type="success" />
<TnAvatar icon="logo-tuniao" type="warning" />
<TnAvatar icon="logo-tuniao" type="danger" />
<TnAvatar icon="logo-tuniao" type="info" />
vue
<TnAvatar icon="logo-tuniao" bg-color="tn-blue-light" />
<TnAvatar icon="logo-tuniao" bg-color="#01beff" />
<TnAvatar icon="logo-tuniao" bg-color="rgb(1, 190, 255)" />
<TnAvatar icon="logo-tuniao" bg-color="gradient__cool-1" />
<TnAvatar icon="logo-tuniao" bg-color="tn-blue-light" />
<TnAvatar icon="logo-tuniao" bg-color="#01beff" />
<TnAvatar icon="logo-tuniao" bg-color="rgb(1, 190, 255)" />
<TnAvatar icon="logo-tuniao" bg-color="gradient__cool-1" />
vue
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" shape="square" />
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" shape="square" />
vue
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" size="sm" />
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" size="lg" />
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" size="xl" />
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" size="sm" />
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" size="lg" />
<TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" size="xl" />
vue
<TnAvatar
  url="https://tnuiimage.tnkjapp.com/logo/tuniao.png"
  border
  border-color="tn-blue"
/>
<TnAvatar
  url="https://tnuiimage.tnkjapp.com/logo/tuniao.png"
  border
  border-color="#01beff"
/>
<TnAvatar
  url="https://tnuiimage.tnkjapp.com/logo/tuniao.png"
  border
  border-color="rgb(1, 190, 255)"
/>
<TnAvatar
  url="https://tnuiimage.tnkjapp.com/logo/tuniao.png"
  border
  border-color="tn-blue"
/>
<TnAvatar
  url="https://tnuiimage.tnkjapp.com/logo/tuniao.png"
  border
  border-color="#01beff"
/>
<TnAvatar
  url="https://tnuiimage.tnkjapp.com/logo/tuniao.png"
  border
  border-color="rgb(1, 190, 255)"
/>

图标头像 ​

使用icon则设置图标头像，图标名称参考图标

  • 通过icon-config参数去设置图标的配置，如size、color等
vue
<script lang="ts" setup>
import type { AvatarIconProps } from '@tuniao/tnui-vue3-uniapp'

const iconConfig: AvatarIconProps = {
  size: 'xl',
  color: 'tn-blue-light',
}
</script>

<template>
  <TnAvatar icon="logo-tuniao" :icon-config="iconConfig" />
</template>

<style lang="scss" scoped></style>
<script lang="ts" setup>
import type { AvatarIconProps } from '@tuniao/tnui-vue3-uniapp'

const iconConfig: AvatarIconProps = {
  size: 'xl',
  color: 'tn-blue-light',
}
</script>

<template>
  <TnAvatar icon="logo-tuniao" :icon-config="iconConfig" />
</template>

<style lang="scss" scoped></style>
vue
<script lang="ts" setup>
import type { AvatarIconProps } from '@/uni_modules/tuniaoui-vue3'

const iconConfig: AvatarIconProps = {
  size: 'xl',
  color: 'tn-blue-light',
}
</script>

<template>
  <tn-avatar icon="logo-tuniao" :icon-config="iconConfig" />
</template>

<style lang="scss" scoped></style>
<script lang="ts" setup>
import type { AvatarIconProps } from '@/uni_modules/tuniaoui-vue3'

const iconConfig: AvatarIconProps = {
  size: 'xl',
  color: 'tn-blue-light',
}
</script>

<template>
  <tn-avatar icon="logo-tuniao" :icon-config="iconConfig" />
</template>

<style lang="scss" scoped></style>

自定义内容 ​

TnAvatar组件支持通过slot来设置组件的内容

vue
<TnAvatar>图</TnAvatar>
<TnAvatar>图</TnAvatar>

头像角标 ​

通过badge参数来设置头像是否显示角标，如果badge不为空则为显示角标

vue
<TnAvatar icon="logo-tuniao" type="primary" badge="99" />
<TnAvatar icon="logo-tuniao" type="primary" badge="99" />

通过badge-config参数来设置头像角标的参数

vue
<script lang="ts" setup>
import type { AvatarBadgeProps } from '@tuniao/tnui-vue3-uniapp'

const badgeConfig: AvatarBadgeProps = {
  type: 'danger',
}
</script>

<template>
  <TnAvatar badge="icon-logo-tuniao" :badge-config="badgeConfig" />
</template>

<style lang="scss" scoped></style>
<script lang="ts" setup>
import type { AvatarBadgeProps } from '@tuniao/tnui-vue3-uniapp'

const badgeConfig: AvatarBadgeProps = {
  type: 'danger',
}
</script>

<template>
  <TnAvatar badge="icon-logo-tuniao" :badge-config="badgeConfig" />
</template>

<style lang="scss" scoped></style>
vue
<script lang="ts" setup>
import type { AvatarBadgeProps } from '@/uni_modules/tuniaoui-vue3'

const badgeConfig: AvatarBadgeProps = {
  type: 'danger',
}
</script>

<template>
  <tn-avatar badge="icon-logo-tuniao" :badge-config="badgeConfig" />
</template>

<style lang="scss" scoped></style>
<script lang="ts" setup>
import type { AvatarBadgeProps } from '@/uni_modules/tuniaoui-vue3'

const badgeConfig: AvatarBadgeProps = {
  type: 'danger',
}
</script>

<template>
  <tn-avatar badge="icon-logo-tuniao" :badge-config="badgeConfig" />
</template>

<style lang="scss" scoped></style>

头像组 ​

使用TnAvatarGroup组件可以将多个头像组合在一起，然后在里面添加TnAvatar组件

设置TnAvatarGroup组件可以统一配置头像的样式，如size、shape、border等，单独设置TnAvatar组件的样式会覆盖TnAvatarGroup组件的样式

vue
<TnAvatarGroup border>
  <TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />
  <TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />
  <TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" :border="false" />
  <TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />
</TnAvatarGroup>
<TnAvatarGroup border>
  <TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />
  <TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />
  <TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" :border="false" />
  <TnAvatar url="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />
</TnAvatarGroup>

API ​

TnAvatar Props ​

属性名说明类型默认值可选值
url头像地址，只支持绝对路径和在线链接String--
icon头像图标String-图标有效值
icon-config头像图标配置AvatarIconProps{}-
size头像尺寸，可以使用可选值和指定的尺寸大小String-sm / lg / xl
shape头像形状Stringcirclecircle / square
type头像颜色类型，设置头像颜色为主题色String-primary / success / warning / danger / info
img-mode图片显示模式StringaspectFitscaleToFill / aspectFit / aspectFill / widthFix / heightFix / top / bottom / center / left / right / top left / top right / bottom left / bottom right
bg-color头像背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
border是否显示边框Booleanfalsetrue
border-bold是否加粗边框，在bo rder为true时有效Booleanfalsetrue
border-color边框颜色，在border为true时有效，支持图鸟内置的边框颜色、hex、rgb、rgbaString--
shadow是否显示阴影Booleanfalsetrue
shadow-color阴影颜色，在shadow为true时有效，支持图鸟内置的阴影颜色String--
badge角标内容，如果为空则不显示角标String | Number--
badge-config角标的配置AvatarBadgeProps{}-

Avatar Events ​

事件名说明回调参数
click头像点击事件-

Avatar Slots ​

插槽名说明
default头像内自定义内容，没有设置url和icon时生效

AvatarGroup Props ​

属性名说明类型默认值可选值
icon-config头像图标配置AvatarIconProps{}-
size头像尺寸，可以使用可选值和指定的尺寸大小String-sm / lg / xl
shape头像形状Stringcirclecircle / square
type头像颜色类型，设置按钮颜色为主题色String-primary / success / warning / danger / info
img-mode图片显示模式StringaspectFitscaleToFill / aspectFit / aspectFill / widthFix / heightFix / top / bottom / center / left / right / top left / top right / bottom left / bottom right
bg-color头像背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
border是否显示边框Booleantruefalse
border-bold是否加粗边框，在bo rder为true时有效Booleanfalsetrue
border-color边框颜色，在border为true时有效，支持图鸟内置的边框颜色、hex、rgb、rgbaStringtn-white-
shadow是否显示阴影Booleanfalsetrue
shadow-color阴影颜色，在shadow为true时有效，支持图鸟内置的阴影颜色String--
gap头像之间遮挡比例String | Number0.4-

AvatarGroup Events ​

事件名说明类型
click头像组点击事件(index: number) => void

AvatarGroup Slots ​

插槽名说明子标签
default头像组内容Avatar

AvatarIconProps ​

具体参数说明可以查看TnIcon

参数说明必填
color图标样式-
size图标尺寸-
bold图标加粗-

AvatarBadgeProps ​

具体参数说明可以查看TnBadge

参数说明必填
max徽标内容最大值-
type徽标类型-
bg-color徽标背景颜色-
text-color徽标文字颜色-
size徽标大小-
font-size字体大小-
bold徽标加粗-
dot是否显示点徽标-
absolute是否绝对定位徽标-
absolute-position绝对定位的位置-
absolute-center绝对居中对齐-

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI