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

2019年9月14日 298次阅读 来源: AshleyLv

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

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

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

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

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

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

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

  • 不要使用多于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组件的网站

    原文作者：AshleyLv
    原文地址: https://segmentfault.com/a/1190000010226370
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞