Miscellaneous UI Components vue.js ライブラリ

イニシャルのアバター画像を表示する「vue-avatar」

イニシャルのアバター画像を表示する「vue-avatar」

vue-avatarとは

vue-avatarは、ユーザーイニシャルのアバター画像を表示するコンポーネントライブです。

ユーザー名をスペースかハイフンで分割することが可能です。

 

イニシャルのアバター画像を表示する「vue-avatar」

 

環境

Vue 2.6.10
vue-avatar 2.1.8

 

インストール

以下のnpmCDNを使ってインストールします。

npm

import Avatar from 'vue-avatar'

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-avatar.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/eliep/vue-avatar

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 [注意]モジュール版は未検証です。

import Avatar from 'vue-avatar'

(2)WEBページの場合

const Avatar = window['VueAvatar'].Avatar;

2.メソッドを設定

上記で取得したAvatarcomponents プロパティに取り込みます。

new Vue({
  el: '#app',
  components: {
    'avatar': Avatar
  },
  data: {
    un: 'カバノキ',
  }
});

3. テンプレートを準備

<avatar> を設置します。

username プロパティにユーザー名を設定します。
ユーザー名に、ハイフンもしくはスペースが含まれていると、分割して表示することができます。

 

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <input type="text" v-model="un">
  <avatar :username="un" :size="100"></avatar> 
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

ユーザーイニシャルのアバター画像を表示するコンポーネントライブでした。

ぜひ遊んでみてください。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Miscellaneous, UI Components, vue.js, ライブラリ
-, , ,