ログイン

Vueで作ったアラートコンポネント

 2020.11.6 グローバルゴリラー李 ゴリラーブログ ブログ

 

グローバルゴリラー李です。よろしくお願いいたします。

 

背景:

システムにおいて、ユーザーにリアルタイムに通知または更新等の処理に対して

リアクションをしたい場合があると思います。

その際に、よく使われているのはjavascriptのalterまたは外部ライブラリー

Sweet Alert等ではないでしょうか。

 

しかし、実際の要望や仕様に応じて機能を追加したくなる場合は、

上記2つの選択肢だけでは拡張しにくいと思います。

 

ですから、迅速に作れて、カスタマイズしやすいアラートを開発したいですね。

 

早速ですが、今回Vueで作ったカスタマイズしやすいアラートの作り方をご紹介します。

 

 

仕様:

・イメージ

・alert.textに文言が入っているとアラートが出るようになっています。

・アラートの種類はinfo,errorの2つ対応していますが、仕様に応じてカスタマイズもしやすいし、

拡張も自由だと思います。

・コードは下記のようになります。

 

Alert.vue
<template>
    <div class="alert-modal" v-show="$data._alert.text">
        <div class="alert-wrapper" :style="getStyle()">
            <div style="width: 97%;padding: 1rem;font-size: 1.5rem;">
                {{$data._alert.text}}<br>
                <p style="margin-bottom: 0;" v-for="(str, index) in $data._alert.arr"=>{{str}}</p>
            </div>
            <div style="margin-top: -8px;float: right;">
                <i class="fa fa-times fa-1x" aria-hidden="true" @click="close()"=></i>
            </div>
        </div>
    </div>
</template>
<script lang="">
    var alert = {
        text: ",
        type: ",
        arr: [],
    }
    var show = false;
    function fire(text, type, resp = null, arr = []){
        alert.text = text;
        alert.type = type;
        alert.arr = arr;

        if (type == "info") {
            setTimeout(()==>{
                alert.text = "
            }, 2000)
        }else{
            if (type == "error" && resp) {
                if (resp.response.status == 401) {
                    alert.text = 'Sessionがタイムアウトしました。';
                    alert.type = "session";
                    document.location.pathname = "/home";
                    setTimeout(()==>{
                        alert.text = ";
                    }, 3000);
                }
            }
        }
    }
    export default {
        // Options / Data
        fire,
        data () {
            return {
                _alert: alert,
            }
        },
        methods: {
            close: function () {
                alert.text = ";
            },
            getStyle: function () {
                if (this.$data._alert.type == "info" || this.$data._alert.type == "session") {
                    return "background: #73a56f;";
                }
                if (this.$data._alert.type == "error") {
                    return "background: #FF0000;";
                }
                if (this.$data._alert.type == "csv") {
                    return "background: #ead362;";
                }
            }
        },
    }
</script>
<style lang="scss">
@import "resources/sass/variables";
.alert-modal{
    position: fixed;
  	width: 85%;
  	max-width: 420px;
  	height: auto;
  	top: calc(50% - 100px);
  	left: 0;
  	right: 0;
  	margin: auto;
  	overflow: hidden;
  	opacity: 1;
  	border-radius: 3px;
  	z-index: 1000;
}
.alert-wrapper{
    display: flex;
    padding: 10px;
  	text-align: center;
  	box-sizing: border-box;
  	color: #fff;
    height: 100px;
}
</style>

・app.jsにインポートする

app.js
以下を追加

 Vue.component('v-alert', vAlert);
 Vue.prototype.Alert = vAlert;

・Main.vue ルートコンポネントに
<v-alert=></v-alert=>追加だけ

・最後に使いたいところに
this.Alert.fire("メッセージ", 'error', resp);

例:api通信の際にsession切れたエラーも対応しています。
getUser: function () {
       const api = axios.create()
        axios.all([
               api.get('api/user/' + id),
        ]).then(axios.spread((user) ==> {
                
        })).catch((resp)==>{
              this.Alert.fire("データの取得に失敗しました。", 'error', resp);
        });
},

最後:

コピペですぐ使えるので効率がいいと思います。

お役に立てれば幸いです。よろしくお願いいたします。

 

 

© 2020 Mountain Gorilla Co., Ltd. 

プライバシーポリシー

%d人のブロガーが「いいね」をつけました。