85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="头像组组件 -- 基础用法"
|
|
type="info"
|
|
style="margin-bottom: 20px"
|
|
/>
|
|
<avatars :data="data" />
|
|
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="头像组组件 -- 不显示tooltip"
|
|
type="info"
|
|
style="margin-top: 20px; margin-bottom: 20px"
|
|
/>
|
|
<avatars :data="data" :tooltip="false" />
|
|
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="头像组组件 -- 最多展示5"
|
|
type="info"
|
|
style="margin-top: 20px; margin-bottom: 20px"
|
|
/>
|
|
<avatars :data="data" :max="5" />
|
|
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="头像组组件 -- 展示头像"
|
|
type="info"
|
|
style="margin-top: 20px; margin-bottom: 20px"
|
|
/>
|
|
<avatars show-avatar :data="data1" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="AvatarsDemo">
|
|
import { ref } from 'vue'
|
|
import { AvatarConfig } from '_c/Avatars/types'
|
|
import Avatars from '_c/Avatars/index.vue'
|
|
|
|
const data = ref<AvatarConfig[]>([
|
|
{ text: '陈某某' },
|
|
{ text: '李某某', type: 'success' },
|
|
{ text: '张某某', type: 'danger' },
|
|
{ text: '王某某', type: 'warning' },
|
|
{ text: '龙某某' },
|
|
{ text: '孙某某' },
|
|
{ text: '刘某某' },
|
|
{ text: '赵某某' }
|
|
])
|
|
const data1 = ref<AvatarConfig[]>([
|
|
{
|
|
text: '陈某某',
|
|
url: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2863969516,2611770076&fm=26&gp=0.jpg'
|
|
},
|
|
{
|
|
text: '李某某',
|
|
url: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=465970198,3877503753&fm=26&gp=0.jpg'
|
|
},
|
|
{
|
|
text: '张某某',
|
|
url: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1857202600,3614139084&fm=26&gp=0.jpg'
|
|
},
|
|
{
|
|
text: '王某某',
|
|
url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1444080181,4150129244&fm=26&gp=0.jpg'
|
|
},
|
|
{
|
|
text: '龙某某',
|
|
url: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2469786567,2163872639&fm=26&gp=0.jpg'
|
|
},
|
|
{
|
|
text: '孙某某',
|
|
url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4119236579,869456058&fm=26&gp=0.jpg'
|
|
},
|
|
{ text: '刘某某', url: 'xxxxx' },
|
|
{ text: '赵某某' }
|
|
])
|
|
</script>
|