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

2019年8月25日 213次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞