avatars 实现头像vue组件，支持中文提取名称，自定

vue-avatars

An avatars component for vue.js.

This component display an avatars image and if none is provided fallback to the user initials. This component is highly inspired from react-user-avatars.

Rules used to compute user initials:

divide the username on space and hyphen use the first letter of each parts never use more than three letters as initials if the username is divided in more than three parts and has part starting with an uppercase, skip parts starting with a lowercase.

You can find a few examples and the documentation here

Reference resources GITHUB:https://github.com/eliep/vue-avatar

Installation

npm install vue-avatars

Version

Vuejs version	vue-avatars version
^1.0.18	^1.3.0
^2.0.0	^2.0.0
^2.0.0	^2.2.0
^2.0.0	^2.3.0

Usage

vue-avatars is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, avatars will be registered as a global variable.

ES6

import avatars from 'vue-avatars' export default { ... components: { avatars }, ... }

After that, you can use it in your templates:

<avatars username="Jane Doe"></avatars> CommonJS

var Vue = require('vue') var avatars = require('vue-avatars') var YourComponent = Vue.extend({ ... components: { 'avatars': avatars.avatars }, ... }) Browser

<script src="path/to/vue/vue.min.js"></script> <script src="path/to/vue-avatars/dist/vue-avatars.min.js"></script> new Vue({ ... components: { 'avatars': Vueavatars.avatars }, ... }) Props

Name	Required	Default	Type	Description
username	N	-	String	The user name that will be used to compute user initial.
initials	N	-	String	Force the displayed initials by overriding the computed ones.
inline	N	false	Boolean	Uses inline-flex instead of flex
src	N	-	String	Path to the avatars image to display.
:customStyle	N	-	Object	A custom style object to override the base styles.
backgroundColor	N	-	String	The avatars 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.
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.
:lighten	N	80	Number	A factor by which the background color must be lightened to produce the font color. Number between [-100,100].
:size	N	50	Number	The avatars size in pixel.
:rounded	N	true	Boolean	True if the avatars must be rounded.
:model	N	ChineseName or default	String	If the avatar must be a Chinese name, use chinesename.

Event

Name	Arguments	Description
@avatars-initials	username (the value of the username props), initials (the value of the computed initials or the initials props if any)	This event is trigger when the component is ready with component username and initial.

Build Setup

# install dependencies npm install # serve gh pages with hot reload at localhost:8080/gh-pages/index.html npm run dev # build npm run bundle Test

npm test License

Released under the MIT License.