分享一个vue的生成头像组件

今天看到一个vue的生成头像的组件--vue-avator。这个组件很实用，可以生成手机或者邮箱通讯录里常见的用户名缩写形式的头像。当然也支持用户上传图片的头像。

它可以支持用户自定义头像的首字母颜色和背景色，当然如果你不设定，它会根据用户名的长度计算出相应的背景色，并且通过背景色计算出相匹配的字母颜色。

用来计算用户姓名大写字母的规则

• 空格和连字符处分隔用户名

• 使用每部分的第一个字母

• 不要使用多于3个字母做姓名大写

• 不要使用多于3个字母做姓名大写

安装

通过NPM安装

npm install vue-avatar

插件应用

vue-avatar是一个UMD模块，可以在CommonJS和AMD的环境中被当作模块使用，在无模块的环境中，Avatar将被注册为全局变量。
ES6

import Avatar from 'vue-avatar/dist/Avatar'
 
export default {
 
  components: {
    Avatar
  },
 
}
<avatar username="Jane Doe"></avatar>

CommonJS

var Vue = require('vue')
var Avatar = require('vue-avatar')
 
var YourComponent = Vue.extend({
  components: {
    'avatar': Avatar.Avatar
  }
})
Browser
    <script src="path/to/vue/vue.min.js"></script>
    <script src="path/to/vue-avatar/dist/vue-avatar.min.js"></script>
 
new Vue({
  components: {
    'avatar': Avatar.Avatar
  }
})

轮子工厂--一个分享优秀的vue,angular组件的网站