JavaScript

Vue をうまく使って Modal の テンプレート 化!

k.w
\お買い物マラソン開催中/

webサイトの記述で複数ページで、HTMLファイルを分割して記述していくことがあると思います。
同じ処理を組み込む場合、繰り返しの数だけ記述しなければならないのでしょうか?
モーダル(Modal)のような汎用性があるものこそ、 テンプレート 化してしいましょう。

スポンサーリンク

モーダルとは?

モーダルとは、エラーや確認メッセージのように使用者に対して、誇張して表示、伝える手法です。
bootstrapのモーダルを使えば簡単に使えます。

以下、bootstrapのサイトで動作イメージや記述に記載あります。
参考にしてください。

[https://getbootstrap.jp/docs/5.0/components/modal/]

vueのフレームワークで繰り返し手間削減

では、早速コードから。
HTMLと、JavaScriptにそれぞれ記載します。

HTMLは、body要素部分に記載してください。
JavaScriptは、vue形式で記載しています。

呼び出し方は、共通ですが、モーダルで実施したいアクションは、アラートとメッセージ(エラー)に分類されると思います。

以下にそれぞれ記述します。

//JavaScript
//呼び出し方

(処理の過程で)~.fail(function (jqXHR, textStatus, errorThrown) {
   this.$refs.alert.showAlert("処理を中断します!");
});

(処理の過程で)~.fail(function (jqXHR, textStatus, errorThrown) {
   this.$refs.error.showErrorModal("エラーが発生しました。");
});

アラート

//HTML
//参照設定(bodyならどこでも)
<alert-panel ref=“alert” id=“pal-alert”></alert-panel>
//JavaScript
//アラートパネル
var AlertPanel = ({
   props; {
      id:””
   },


   methods; {
      //アラート表示(呼び出しコンポーネントから)
      showAlert: function (_message) {
         this.message = _message;
         $(this.target_id).modal(‘show’);
         //2秒後に消す
         window.setTimeout(“$(‘“ + this.target_id + “‘).modal(‘hide’)”,2000);
      }
   },

   computed: {
      target_id: function(){
         return “#” + this.id;
      }
   },

   template: ‘<div :id=“id” class=“modal fade”>’ +
      ‘   <div class=“modal-dialog modal-lg modal-alert”>’ +
      ‘      <div class=“modal-content”>’ +
      ‘         <div class=“modal-body rounded” style=“background-color:yellow; color:maroon;”>’ +
      ‘            <div class=“text-conter”>’ +
      ’               <span class=“h6”>{{message}}</span>‘ +
      ‘            </div>’ +
      ’         </div>’ +
      ’      </div>’ +
      ’   </div>’ +
      ‘</div>’
})

メッセージ・エラー

//HTML
//参照設定(bodyならどこでも)
<modal-panel ref=“message” id=“pnl-message“></modal-panel>
<modal-panel ref=“error” id=“pnl-error”></modal-panel>
//JavaScript
//メッセージ・エラー
var AlertPanl = ({
   props; {
      id:””
   },

   data: function() {
      return {
         title: “メッセージ”,     //タイトル
         message: “”,           //メッセージ(本文)
         is_error: false,       //エラー画面かどうか
         ok_button: true,       //OKボタンの有無
         cancel_button: false   //キャンセルボタンの有無
      }
   },

   methods; {
      //確認画面表示(呼び出しコンポーネントから)
      showConfirmModal: function (_message) {
         this.title = “確認”;
         this.cancel_button = true;
         this.showModal(_message);
      },
      showErrorModal: function(_message) {
         this.title = “エラー”;
         this.is_error = true;
         this.showModal(_message);
      },
      showModal: function(_message) {
         this.message = _message;
         $(this.target_id).modal(‘show’);
      },
      goOK: function() {
         this.$emit(‘clicked-ok-button’);
      },
      goCancel: function() {
         this.$emit(‘clicked-cancel-button’);
      },
   },

   computed: {
      target_id: function(){
         return “#” + this.id;
      }
   },

   template: ‘<div :id=“id” class=“modal fade”>’ +
      ‘   <div class=“modal-dialog”>’ +
      ‘      <div class=“modal-content”>’ +
      ‘         <div class=“modal-header”>’ +
      ‘            <h3 class=“modal-title”>{{title}}</h3>’ +
      ‘            <button type=“button” class=“btn-closed” data-bs-dismiss=“modal” aria-label=“Close”></button>’ +
      ‘         </div>’ +
      ‘         <div class=“modal-body”>’ +
      ‘            <div class=“form2”>’ +
      ‘               <div class=“row” v-bind:class=“{‘ + “‘text-danger’” + ‘:is_error}”>’ +
      ‘                  <span class=“h6 m-3”>{{message}}</span>‘ +
      ‘               </div>’ +
      ‘            </div>’ +
      ‘            <div class=“modal-footer”>’ +
      ‘               <button type=“button” class=“btn btn-sm btn-primary” data-bs-dismiss=“modal” v-if=“ok_button” v-on:click=“goOK()”>OK</button>’ +
      ‘               <button type=“button” class=“btn btn-sm btn-light” data-dismiss=“modal” v-if=“cancel_button” v-on:click=“goCancel()”>CANCEL</button>’ +
      ‘            </div>’ +
      ’         </div>’ +
      ’      </div>’ +
      ’   </div>’ +
      ‘</div>’
})

説明

template部分が、HTMLで記述すべき内容を定義しています。前段で定義したボタンやメッセージを、結合していることがわかると思います。

呼び出し時に各々の引数を受け取ることで、メッセージ形式とエラー形式を切り替えています。

ボタンの種類や色など見てカスタマイズも出来ます。
詳しく知りたい方は、bootstrapの記述方法を参照してみてください。

ABOUT ME
記事URLをコピーしました