mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-16 06:06:56 +08:00
39 lines
No EOL
1 KiB
Vue
39 lines
No EOL
1 KiB
Vue
<template>
|
|
<div class="flex items-center gap-1 cursor pointer">
|
|
<div v-for="(user, i) in visibleUsers" :key="i" :title="user.full_name">
|
|
<img :src="user.avatar" class="w-7 h-7" />
|
|
</div>
|
|
<div v-if="hiddenUsers.length > 0" :title="hiddenUsersTitle" class="flex shrink-0 items-center justify-center w-7 h-7 rounded-full bg-sn-dark-grey text-sn-white">
|
|
+{{ hiddenUsers.length }}
|
|
</div>
|
|
<div class="flex items-center shrink-0 justify-center w-7 h-7 rounded-full bg-sn-light-grey text-sn-dark-grey">
|
|
<i class="sn-icon sn-icon-new-task"></i>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'UsersRenderer',
|
|
props: {
|
|
params: {
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
users() {
|
|
return this.params.value || []
|
|
},
|
|
visibleUsers() {
|
|
return this.users.slice(0, 4)
|
|
},
|
|
hiddenUsers() {
|
|
return this.users.slice(4)
|
|
},
|
|
hiddenUsersTitle() {
|
|
return this.hiddenUsers.map((user) => user.full_name).join("\u000d")
|
|
}
|
|
}
|
|
|
|
}
|
|
</script> |