分享一個vue的生成頭像組件

gnehc 發布于2019-08-20 18:05 / 2674人閱讀

摘要：今天看到一個的生成頭像的組件。這個組件很實用，可以生成手機或者郵箱通訊錄里常見的用戶名縮寫形式的頭像。當然也支持用戶上傳圖片的頭像。輪子工廠一個分享優秀的組件的網站

今天看到一個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組件的網站

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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
前端技術日志 | 19年8月21日 | 新的 React DevTools 介紹

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

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

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

zhiwei 2019-08-26 10:58 評論0 收藏0