Skip to content

Instantly share code, notes, and snippets.

@vladimirmyshkovski
Forked from cb109/UserInitials.vue
Created October 15, 2020 09:19
Show Gist options
  • Save vladimirmyshkovski/e4e963e2946f6f27c8ff562ac2cc6cbd to your computer and use it in GitHub Desktop.
Save vladimirmyshkovski/e4e963e2946f6f27c8ff562ac2cc6cbd to your computer and use it in GitHub Desktop.
Vuetify User Initials Avatar
<template>
<v-avatar v-if="user !== null"
:size="size"
:style="{'background-color': backgroundColor}">
<strong class="initials"
:style="{'color': fontColor,
'font-size': fontSize}">
{{ (user.first_name[0] + user.last_name[0]) || '?' }}
</strong>
</v-avatar>
</template>
<script>
// npm install randomcolor
import randomColor from 'randomcolor';
export default {
name: 'user-initials',
props: {
'user': {
type: null|Object,
required: true,
},
'size': {
type: Number,
default: 40,
},
'color': {
type: null|String,
default: null,
},
'initialsOnly': {
type: Boolean,
default: false,
},
},
computed: {
fontSize() {
return this.size / 40.0 * 17 + 'px';
},
fontColor() {
if (this.initialsOnly) {
return this.color || this.userToColour(this.user);
}
return 'white';
},
backgroundColor() {
if (this.initialsOnly) {
return 'transparent';
}
return this.color || this.userToColour(this.user);
},
},
methods: {
stringToColour(str) {
return randomColor({
seed: str,
luminosity: 'dark',
});
},
userToColour(user) {
return this.stringToColour(user.id +
user.first_name +
user.last_name +
user.email);
},
},
}
</script>
<style scoped>
.initials {
text-transform: uppercase;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment