分享一個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組件的網站