Componente de Avatar para Vue.js

by Vue.js Examples

v-avatar

Este componente esta altamente inspirado y basado en el trabajo de https://github.com/eliep/vue-avatar, para recuperar y mantener un componente de mucha utilidad, agradecimientos totales.

Para el uso del componente es necesario:

View Demo View Github

Para el uso del componente es necesario:

  • Dividir el username con espacios y guiones.
  • Utiliza la primer letra de cada palabra del nombre.
  • Utiliza hasta un maximo de tres letras iniciales.
  • Si el nombre esta dividido en mas de tres partes y alguna de esta comienza con mayuscula, saltara aquellas que comienzen en minuscula.

Puedes encontrar algunos ejemplos aquí.

Instalación

npm install @amaury-tobias/v-avatar

Uso

v-avatar es un modulo UMD, por lo que puede ser utilizado en tanto en una instancia de Vue como en Nuxt como en un entorno non-modular donde vAvatar sera registrada como variable global.

VUE COMPONENT

<template>
<div>
  <v-avatar username='John Doe' />
</div>
</template>

<script>
import vAvatar from '@amaury-tobias/v-avatar'

export default {
  components: {
    vAvatar
  }
}
</script>

OR GLOBAL

import Vue from 'vue'
import vAvatar from '@amaury-tobias/v-avatar'

Vue.use(vAvatar)

NUXT

./plugins/vAvatar.js

import Vue from 'vue'
import vAvatar from '@amaury-tobias/v-avatar'

Vue.use(vAvatar)

nuxt.config.js

module.exports = {
  plugins: ['~/plugins/vAvatar.js']
}

*.vue <template>

<v-avatar username="John Doe" />

Browser

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/@amaury-tobias/v-avatar"></script>
  </head>
  <body>
    <div id="app">
      <v-avatar username="Jon Doe"></v-avatar>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        components: {
          VAvatar
        }
      })
    </script>
  </body>
</html>

Props

NameRequiredDefaultTypeDescription
username Y - String Nombre utilizado para computar las iniciales.
initials N - String Iniciales forzadas para sustituir a las computadas.
inline N false Boolean display: inline-flex en lugar de flex
src N - String Image Path.
:customStyle N - Object CSS custom.
backgroundColor N - String The avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length. Especifica el color de fondo a utilizar si no se provee una imagen, el color de fondo se calcula en base a la longitud del nombre si no se da uno especifico.
color N - String The font color used to render the user initials. If none is provided, the background color is used to compute the font color. Color utilizado para mostrar las iniciales del usuario, si no es asignada se calcula en base al color de fondo.
:lighten N 80 Number A factor by which the background color must be lightened to produce the font color. Number between [-100,100]. Valor utilizado para calcular la diferencia entre el color de fondo y de fuente, puede ser un valor entre [-100, 100].
:size N 50 Number The avatar size in pixel. Tamaño del avatar en pixeles.
:rounded N false Boolean True if the avatar must be rounded. True para mostrar el avatar redondo.

Event

NameArgumentsDescription
@avatar-initials username (the value of the username props), initials (the value of the computed initials or the initials props if any). username (en valor de la prop username), initials (el valor de las iniciales calculadas o las dadas en los props). This event is trigger when the component is ready with component username and initial. El evento es lanzado cuando el componente esta listo y las iniciales han sido calculadas.

Build Setup

# install dependencies
npm install

# serve whith hot reload al localhost:8080
npm run serve

# build
npm run build

Test

npm test

GitHub