通知機能を実装するためのVue-notificationについて説明します。
Vue-notificationとは?
Vue-notificationとは、通知機能を実装するライブラリです。
Vue-notificationのインストール方法
Vue-notificationをインストールする方法について説明します。
npmを使用してインストールする方法
npmを使用してインストールする場合、コマンドラインに次のコマンドを記述してインストールします。
$npm install --save vue-notification
CDNを使用してインストールする方法
CDN(Content Delivery Network)を使用してインストールする場合、htmlファイルの<body>タグの中に次のコードを記述します。
<script type="text/javascript" src="https://unpkg.com/vue-notification"></script>
Vue-notificationの使用方法
まず、次に示すHTMLファイルとJavaScriptファイルを基に、CDNを利用したvue-notificationの扱い方について説明していきます。
(index.html)
<body> <div id="app"> //クリックしたら通知するように設定 <button @click="onClick()">クリック</button> <notifications group="グループ名" position="表示する場所(top centerなど)"></notifications>//ここについては後ほど説明します。 </div> //vue-notificationのライブラリの導入 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript" window.vue = window.Vue; </script> <script type="text/javascript" src="https://unpkg.com/vue-notification"></script> <script src="./test.js" ></script> </body>
(test.js)
window.vueNotification = window["vue-notification"].default; Vue.use(vueNotification); new Vue({ el: "#app", methods: { onClick: function(){ this.$notify({ group:'グループ名',//グループ名 title: 'タイトル',//タイトル text: 'テキスト',//テキスト文 duration:100,//通知の表示時間 type: 'error',//通知タイプ[error,success,warm] speed: 200,//通知表示アニメーション速度 }); } }, })
ライブラリの取り込み
CDNで取り込む場合、ライブラリの取り込みに関してはHTMLのBodyに次のコードを入力し、JavaScript内で次のコードを入力すれば完了です。
(index.html)
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript"> window.vue = window.Vue; </script> <script type="text/javascript" src="https://unpkg.com/vue-notification"></script> <script src="./test.js" ></script>
(test.js)
window.vueNotification = window["vue-notification"].default; Vue.use(vueNotification);
通知の設定(HTML側)
HTML上での通知の設定を行っていきます。今回はクリックしたら通知が出てくるような機能の設定を行っています。ここで、<notifications>のプロパティについては次の表で説明します。このプロパティを用いることで、多様な通知機能の設定ができます。
<div id="app"> //クリックしたら通知するように設定 <button @click="onClick()">クリック</button> <notifications group="グループ名" position="表示する場所(top centerなど)"></notifications>//以下にプロパティについて記載 </div>
Name | Type | Default | Description |
group | String | null | 指定した場合の通知ホルダー名 |
type | String | null | 通知に割り当てられるクラス |
width | Number/String | 300 | 通知ホルダーの横幅 有効値: '100%', '200px', 200 |
classes | String/Array | 'vue-notification' | 通知要素に適用されるクラスのリスト |
position | String/Array | 'top right' | ポップアウトされる通知の場所 水平方向:left,right,center 鉛直方向:top,bottom |
animation-type | String | 'css' | アニメーションタイプ,現在サポートしているのはcssかvelocity |
animation-name | String | null | cssアニメーションのための名前 |
animation | Object | $* | velocityのためのアニメーション設定 $= {enter: {opacity: [1, 0]}, leave: {opacity: [0, 1]}} |
duration | Number | 3000 | 通知のステイ時間、マイナスなら永久 |
speed | Number | 300 | 表示/非表示のスピード |
max | Number | Infinity | 通知ホルダーの最大表示数 |
reverse | Boolean | false | 通知を逆の順で表示 |
ignoreDuplicates | Boolean | false | 重複を無視する |
closeOnClick | Boolean | true | クリックしたら通知を消す |
通知の設定(JavaScript側)
JavaScript側での設定を行います。こちらでは通知機能を実装するためのメソッドの設定を次のコードのように入力していきます。notifyで利用可能なパラメーターは次のコード内のコメントで説明してあります。
new Vue({ el: "#app", methods: { onClick: function(){ this.$notify({ //ここでは説明のために全て記す(実際は全て記す必要はない) group:'グループ名',//グループ名 title: 'タイトル',//タイトル text: 'テキスト',//テキスト文 duration:100,//通知の表示時間 type: 'error',//通知タイプ[error,success,warm] speed: 200,//通知表示アニメーション速度 }); } }, })
Vue-notificationの使用例
では、実際の使用例について紹介します。ログインボタンをクリックした時にログインエラーが通知されるような機能をVue-notificationを使って実装していきます。(これは、通知機能を説明するために作ったもので、実際のログイン機能はありません)
コード
(index.html)
<body> <div class="main" id="app"> <h2>ログイン画面</h2> ID:<input></input></br> password:<input></input></br> <button @click="onClick()">【Login】</button> <notifications group="login" position="top center"></notifications> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript"> window.vue = window.Vue; </script> <script type="text/javascript" src="https://unpkg.com/vue-notification"></script> <script src="./test.js" ></script> </body>
(test.js)
window.vueNotification = window["vue-notification"].default; Vue.use(vueNotification); new Vue({ el: "#app", methods: { onClick: function(){ this.$notify({ title: 'IDとパスワードが一致しません', text: 'ログインできません', duration:100, group: 'login', type: 'error', speed: 200, }); } }, })
実際の画面
この記事のまとめ
本記事ではVue-notificationを、実際の実装例を元に説明しました!
最後に記事の要点をまとめてみましょう。
- Vue-notificationを使うことで、通知機能が実装できる。
- 多様なプロパティを用いて多様な通知設定が行える。
Vue-notificationを是非活用してみましょう!