Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
34221f3
commit 7f5ef99
Showing
12 changed files
with
833 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| <template> | ||
| <div class="avatars-wrap"> | ||
| <template v-if="tooltip"> | ||
| <el-tooltip | ||
| v-for="(item, $index) in avatarsData" | ||
| :key="$index" | ||
| :content="item.text" | ||
| placement="top" | ||
| > | ||
| <div | ||
| :class=" | ||
| showAvatar ? 'avatars-item-img' : ['avatars-item', `avatars-${item.type || 'default'}`] | ||
| " | ||
| > | ||
| <el-avatar v-if="showAvatar" :size="40" :src="item.url"> | ||
| <img :src="defaultImg" /> | ||
| </el-avatar> | ||
| <span v-else>{{ item.text.substr(0, 1) }}</span> | ||
| </div> | ||
| </el-tooltip> | ||
| <div v-if="max && data.length - max > 0" :class="['avatars-item', 'avatars-item-img']"> | ||
| <span>+{{ data.length - max }}</span> | ||
| </div> | ||
| </template> | ||
| <template v-else> | ||
| <div | ||
| v-for="(item, $index) in avatarsData" | ||
| :key="$index" | ||
| :class=" | ||
| showAvatar ? 'avatars-item-img' : ['avatars-item', `avatars-${item.type || 'default'}`] | ||
| " | ||
| > | ||
| <el-avatar v-if="showAvatar" :size="40" :src="item.url"> | ||
| <img :src="defaultImg" /> | ||
| </el-avatar> | ||
| <span v-else>{{ item.text.substr(0, 1) }}</span> | ||
| </div> | ||
| <div v-if="max && data.length - max > 0" :class="['avatars-item', 'avatars-item-img']"> | ||
| <span>+{{ data.length - max }}</span> | ||
| </div> | ||
| </template> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts" name="Avatars"> | ||
| import { PropType, computed } from 'vue' | ||
| import { deepClone } from '@/utils' | ||
| import { AvatarConfig } from './types' | ||
| import defaultImg from '@/assets/img/default-avatar.png' | ||
| const props = defineProps({ | ||
| // 展示的数据 | ||
| data: { | ||
| type: Array as PropType<AvatarConfig[]>, | ||
| default: () => [] | ||
| }, | ||
| // 最大展示数量 | ||
| max: { | ||
| type: Number as PropType<number>, | ||
| default: 0 | ||
| }, | ||
| // 是否使用头像 | ||
| showAvatar: { | ||
| type: Boolean as PropType<boolean>, | ||
| default: false | ||
| }, | ||
| // 是否显示完整名称 | ||
| tooltip: { | ||
| type: Boolean as PropType<boolean>, | ||
| default: true | ||
| } | ||
| }) | ||
| const avatarsData = computed(() => { | ||
| if (props.max) { | ||
| if (props.data.length <= props.max) { | ||
| return props.data | ||
| } else { | ||
| const data = deepClone(props.data).splice(0, props.max) | ||
| return data | ||
| } | ||
| } else { | ||
| return props.data | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="less" scoped> | ||
| .avatars-wrap { | ||
| display: flex; | ||
| .avatars-item { | ||
| display: inline-block; | ||
| width: 40px; | ||
| height: 40px; | ||
| line-height: 40px; | ||
| color: #fff; | ||
| text-align: center; | ||
| background: #2d8cf0; | ||
| border: 1px solid #fff; | ||
| border-radius: 50%; | ||
| } | ||
| .avatars-item-img { | ||
| display: inline-block; | ||
| border-radius: 50%; | ||
| .el-avatar--circle { | ||
| border: 1px solid #fff; | ||
| } | ||
| } | ||
| .avatars-item-img + .avatars-item-img { | ||
| margin-left: -12px; | ||
| } | ||
| .avatars-item + .avatars-item { | ||
| margin-left: -12px; | ||
| } | ||
| .avatars-default { | ||
| color: #bae7ff; | ||
| background: #096dd9; | ||
| } | ||
| .avatars-success { | ||
| color: #f6ffed; | ||
| background: #52c41a; | ||
| } | ||
| .avatars-danger { | ||
| color: #fff1f0; | ||
| background: #f5222d; | ||
| } | ||
| .avatars-warning { | ||
| color: #fffbe6; | ||
| background: #faad14; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export interface AvatarConfig { | ||
| text: string | ||
| type?: string | ||
| url?: string | ||
| } |
Oops, something went wrong.