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

gnehc 发布于2019-08-20 18:05 / 2528人阅读

摘要：今天看到一个的生成头像的组件。这个组件很实用，可以生成手机或者邮箱通讯录里常见的用户名缩写形式的头像。当然也支持用户上传图片的头像。轮子工厂一个分享优秀的组件的网站

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

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

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

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

使用每部分的第一个字母

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

安装

通过NPM安装

npm install vue-avatar

插件应用

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

import Avatar from "vue-avatar/dist/Avatar"

export default {

  components: {
    Avatar
  },

}

CommonJS

var Vue = require("vue")
var Avatar = require("vue-avatar")

var YourComponent = Vue.extend({
  components: {
    "avatar": Avatar.Avatar
  }
})
Browser
    
    

new Vue({
  components: {
    "avatar": Avatar.Avatar
  }
})

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

混合云服务器托管 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84065.html

一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。欢迎访问我的个人网站：http://www.neroht.com/ 刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的...

tangr206 2019-06-26 17:34 评论0 收藏0
Vue 进阶系列（三）之Render函数原理及实现

摘要：进阶系列一之响应式原理及实现进阶系列二之插件原理及实现进阶系列三之函数原理及实现函数原理根据第一篇文章介绍的响应式原理，如下图所示。在初始化阶段，本质上发生在函数中，然后通过函数生成，根据生成。负责收集依赖，清除依赖和通知依赖。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）showImg(https://segmentfa...

geekidentity 2019-08-23 12:55 评论0 收藏0
vue-avatar-tailor，vue头像裁剪组件

摘要：实现原理简单，纯技术处理图片，几乎不需要用到相关知识面向人群急于使用头像裁剪组件的同学。裁剪框初始宽高上传图片后，裁剪区将预设为最大裁剪范围。支持矩形裁剪目前九宫仅支持将图片裁剪为正方形，不能裁剪为矩形，该功能将在后续优化。项目简介本组件是vue下的头像裁剪组件，可以直接拷贝代码使用，无需安装依赖使用九宫格进行裁剪，自由选择裁剪区域。实时预览裁剪后效果。可以将裁剪好的图片，...

imccl 2019-08-23 12:13 评论0 收藏0
前端技术日志 | 19年8月21日 | 新的 React DevTools 介绍

摘要：前端技术日新月异，在你巩固底层技能的同时，别忘了还要跟上前沿技术的发展步伐。你可以从谷歌的博客中了解更多相关信息。令我惊讶的是，谷歌所有地方在非常简单的页面上都没有搜索栏。快速发布预览零配置打包工具。快速启动新的工具。 Web 前端技术日新月异，在你巩固底层技能的同时，别忘了还要跟上前沿技术的发展步伐。本期刊专注于 Web 前端前沿技术，收集的内容来自国外各大前端技术周刊，这里把值得...

pepperwang 2019-08-30 15:44 评论0 收藏0