组件用.vue还是.js_一个Vue.js 2.0组件，用于生成首字母缩写或基于图像的头像-CSDN博客

组件用.vue还是.js

Vue头像组件 (vue-avatar-component)

This vue.js component provide a simple way to generate rounded and colored avatar stickers to use in your applications.

这个vue.js组件提供了一种生成圆形和彩色化身贴纸的简单方法，以在您的应用程序中使用。

If you just provide a name to the component, i will show a colored patch showing the provided name's initials. Its color is depending and is unique for each given name.

如果您只是为组件提供一个名称，我将显示一个彩色补丁，显示提供的名称的缩写。它的颜色取决于每个给定名称的唯一性。

If you provide an image url, this image will be shown, sized and truncated to fit into the component's placeholder.

如果提供图像URL，则将显示该图像，调整其大小并将其截断以适合组件的占位符。

安装 (Installation)

npm install --save-dev vue-avatar-component

.vue组件中的示例用法 (Example Usage from within a .vue component)

<template>
  <div>
    <avatar fullname="My Sticker" size="96"></avatar>
  </div>
</template>

<script>
  import Avatar from 'vue-avatar-component'
  export default {
    components: { Avatar }
  }
</script>

This will show this avatar as result :

结果将显示此头像：

参量 (Parameters)

fullname : the full name from which the initials and the color will be computed. Initials are extracted taking the first letter of each word, separated by a space or an hyphen. If there is more, only the 3 first initials are kept. For example, Foo Bar gives FB, My Foo-Bar gives MFB, FOO gives F and My Fantastic Vue Component gives MFV. If not provided, fullname defaults to '##'.

fullname ：将从中计算出缩写和颜色的全名。以每个单词的第一个字母提取首字母，以空格或连字符分隔。如果还有更多，则仅保留3个首字母缩写。例如， Foo Bar给出FB ， My Foo-Bar给出MFB ， FOO给出F ， My Fantastic Vue Component给出MFV 。如果未提供，则全名默认为“ ##”。

size : the size of the sticker to generate, in pixels. If not provided, the size defaults to 48 pixels. The font size inside the avatar is computed from its overall size (half if 1 or 2 letters, third for 3 letters).

size ：要生成的标签大小，以像素为单位。如果未提供，则尺寸默认为48像素。化身内部的字体大小是根据其总体大小(如果是1个或2个字母，则减半，如果是3个字母，则减半)。

image : the url of the image to fit in the avatar sticker. If provided not empty, initials will not show and the image wil be shown. Be careful that if the provided image url is wrong, the component has its size but shows nothing.

image ：适合头像贴纸的图片网址。如果提供的内容不为空，则不会显示首字母，并且将显示图像。请注意，如果提供的图像URL错误，则组件具有其大小，但什么也不显示。

radius : percentage of the overall size to show the rounded corners of the avatar. Provide a number beetween 0 and 50 : at 0%, the avatar will be a square, at 50% it will be exactly circular. This percentage defaults to 50 if not provided.

radius ：显示虚拟角色的圆角的整体大小的百分比。提供介于0到50之间的数字：0％时，头像为正方形，50％时为正圆形。如果未提供，则此百分比默认为50。

color : If provided, overides the computed color for the initials based avatar. Just provide a CSS color (named, hex or rgba fits).

color ：如果提供，则覆盖基于缩写的化身的计算出的颜色。只需提供CSS颜色(命名为hex或rgba适合)即可。

例子 (examples)

If images don't show, go to this component's github repository to see the full README.

如果未显示图像，请转到此组件的github存储库以查看完整的README。

`<avatar fullname="My Fabulous Component"></avatar>` will show :
`<avatar fullname="Foo Bar" size="60"></avatar>` will show :
`<avatar image="http://lorempicsum.com/simpsons/255/200/9" size="96"></avatar>` will show :
`<avatar image="http://lorempicsum.com/simpsons/255/200/5" size="96" radius="0"></avatar>` will show :
`<avatar fullname="Foo Bar" radius="25" color="red"></avatar>` will show :

`<avatar fullname="My Fabulous Component"></avatar>`将显示：
`<avatar fullname="Foo Bar" size="60"></avatar>`将显示：
`<avatar image="http://lorempicsum.com/simpsons/255/200/9" size="96"></avatar>`将显示：
`<avatar image="http://lorempicsum.com/simpsons/255/200/5" size="96" radius="0"></avatar>`将显示：
`<avatar fullname="Foo Bar" radius="25" color="red"></avatar>`将显示：