プログラミング の基礎 関数 の 比較 (VBA/Python/JavaScript)
k.w
SEへの道
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
