分享一個(gè)vue的生成頭像組件

gnehc 發(fā)布于2019-08-20 18:05 / 2683人閱讀

摘要：今天看到一個(gè)的生成頭像的組件。這個(gè)組件很實(shí)用，可以生成手機(jī)或者郵箱通訊錄里常見(jiàn)的用戶名縮寫形式的頭像。當(dāng)然也支持用戶上傳圖片的頭像。輪子工廠一個(gè)分享優(yōu)秀的組件的網(wǎng)站

今天看到一個(gè)vue的生成頭像的組件--vue-avator。這個(gè)組件很實(shí)用，可以生成手機(jī)或者郵箱通訊錄里常見(jiàn)的用戶名縮寫形式的頭像。當(dāng)然也支持用戶上傳圖片的頭像。

它可以支持用戶自定義頭像的首字母顏色和背景色，當(dāng)然如果你不設(shè)定，它會(huì)根據(jù)用戶名的長(zhǎng)度計(jì)算出相應(yīng)的背景色，并且通過(guò)背景色計(jì)算出相匹配的字母顏色。

用來(lái)計(jì)算用戶姓名大寫字母的規(guī)則

空格和連字符處分隔用戶名

使用每部分的第一個(gè)字母

不要使用多于3個(gè)字母做姓名大寫

安裝

通過(guò)NPM安裝

npm install vue-avatar

插件應(yīng)用

vue-avatar是一個(gè)UMD模塊，可以在CommonJS和AMD的環(huán)境中被當(dāng)作模塊使用，在無(wú)模塊的環(huán)境中，Avatar將被注冊(cè)為全局變量。
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
  }
})

輪子工廠--一個(gè)分享優(yōu)秀的vue,angular組件的網(wǎng)站

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開(kāi)發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84065.html

相關(guān)文章

一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實(shí)踐項(xiàng)目

摘要：利用中間件實(shí)現(xiàn)異步請(qǐng)求，實(shí)現(xiàn)兩個(gè)用戶角色實(shí)時(shí)通信。目前還未深入了解的一些概念。往后會(huì)寫更多的前后臺(tái)聯(lián)通的項(xiàng)目。刪除分組會(huì)連同組內(nèi)的所有圖片一起刪除。算是對(duì)自己上次用寫后臺(tái)的一個(gè)強(qiáng)化，項(xiàng)目文章在這里。后來(lái)一直沒(méi)動(dòng)，前些日子才把后續(xù)的完善。歡迎訪問(wèn)我的個(gè)人網(wǎng)站：http://www.neroht.com/? 剛學(xué)vue和react時(shí)，利用業(yè)余時(shí)間寫的關(guān)于這兩個(gè)框架的訓(xùn)練，都相對(duì)簡(jiǎn)單，有的...

tangr206 2019-06-26 17:34 評(píng)論0 收藏0
Vue 進(jìn)階系列（三）之Render函數(shù)原理及實(shí)現(xiàn)

摘要：進(jìn)階系列一之響應(yīng)式原理及實(shí)現(xiàn)進(jìn)階系列二之插件原理及實(shí)現(xiàn)進(jìn)階系列三之函數(shù)原理及實(shí)現(xiàn)函數(shù)原理根據(jù)第一篇文章介紹的響應(yīng)式原理，如下圖所示。在初始化階段，本質(zhì)上發(fā)生在函數(shù)中，然后通過(guò)函數(shù)生成，根據(jù)生成。負(fù)責(zé)收集依賴，清除依賴和通知依賴。（關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://segmentfa...

geekidentity 2019-08-23 12:55 評(píng)論0 收藏0
前端技術(shù)日志 | 19年8月21日 | 新的 React DevTools 介紹

摘要：前端技術(shù)日新月異，在你鞏固底層技能的同時(shí)，別忘了還要跟上前沿技術(shù)的發(fā)展步伐。你可以從谷歌的博客中了解更多相關(guān)信息。令我驚訝的是，谷歌所有地方在非常簡(jiǎn)單的頁(yè)面上都沒(méi)有搜索欄。快速發(fā)布預(yù)覽零配置打包工具。快速啟動(dòng)新的工具。 Web 前端技術(shù)日新月異，在你鞏固底層技能的同時(shí)，別忘了還要跟上前沿技術(shù)的發(fā)展步伐。本期刊專注于 Web 前端前沿技術(shù)，收集的內(nèi)容來(lái)自國(guó)外各大前端技術(shù)周刊，這里把值得...

pepperwang 2019-08-30 15:44 評(píng)論0 收藏0
前端技術(shù)日志 | 19年8月21日 | 新的 React DevTools 介紹

摘要：前端技術(shù)日新月異，在你鞏固底層技能的同時(shí)，別忘了還要跟上前沿技術(shù)的發(fā)展步伐。你可以從谷歌的博客中了解更多相關(guān)信息。令我驚訝的是，谷歌所有地方在非常簡(jiǎn)單的頁(yè)面上都沒(méi)有搜索欄。快速發(fā)布預(yù)覽零配置打包工具。快速啟動(dòng)新的工具。 Web 前端技術(shù)日新月異，在你鞏固底層技能的同時(shí)，別忘了還要跟上前沿技術(shù)的發(fā)展步伐。本期刊專注于 Web 前端前沿技術(shù)，收集的內(nèi)容來(lái)自國(guó)外各大前端技術(shù)周刊，這里把值得...

zhiwei 2019-08-26 10:58 評(píng)論0 收藏0