📝

Vue.js でモーダル画面を作ってみた

2022/05/02に公開

Vue.js

tech

その昔に Vue.js でモーダル画面を作ったものがあったので気まぐれに公開することにしました。
何かの参考になれば幸いです。

GitHub

https://github.com/nkm-m/Vue-Modal

動作サンプル

コードの中身

Vue.js のデフォルトアプリを少し修正するかんじで作っています。
変更しているのは HelloWorld.vue のみ、追加したのは Modal.vue のみです。

HelloWorld.vue

template 部分にモーダルのコンポーネントを埋め込んで、v-show ディレクティブで表示 / 非表示を切り替えています。
実際の切り替え処理はボタンを押したときに showModal メソッドで v-show の true / false を切り替えているだけです。

@execute-method="executeMethod" は、モーダルでの選択後に実行されるメソッドです。
名前は適当なので必要に応じて変更してください。

:message="message" には後述の data で、モーダルに表示したい任意のメッセージを記載してください。今回は「よろしいですか？」にしてあります。

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <button @click="showModal()">モーダルを表示</button>
    <modal
      :message="message"
      v-show="modal"
      @execute-method="executeMethod"
    ></modal>
  </div>
</template>

script 部分では、モーダルのコンポーネントを読み込んで登録します。
data 内に message と modal を定義し、デフォルト値を設定しています。
modal のデフォルト値は false なので、モーダルはデフォルトで非表示状態です。

template 内のボタンをクリックすると、showModal メソッドが呼ばれ、modal を true にして、モーダルを表示させます。
モーダル表示の際に何らかの処理が必要な場合には、ここに記載してください。

モーダルでの選択後に、executeMethod が呼ばれます。
モーダルでの選択を yes というイケてない名前の引数として、メソッド内で処理を分岐させています。
今回はアラートを表示させるだけですが、ここに必要な処理を書いてください。

HelloWorld.vue

<script>
import Modal from "./Modal.vue";

export default {
  name: "HelloWorld",
  components: {
    Modal,
  },
  data() {
    return {
      message: "よろしいですか？",
      modal: false,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    showModal() {
      // モーダル表示する際の処理が必要ならここに書く
      this.modal = true;
    },
    executeMethod(yes) {
      // モーダルを非表示にして、モーダルでの選択結果によって処理を変える
      this.modal = false;
      if (yes) {
        alert("はい が押されました。");
      } else {
        alert("いいえ が押されました。");
      }
    },
  },
};
</script>

モーダル部分のコンポーネントです。

template 部分ではメッセージと選択肢を表示します。
はい / いいえの選択によって呼ばれるメソッドが変わります。

Modal.vue

<template>
  <div id="modal">
    <div id="modal-content" class="modal">
      <p id="modal-message" class="modal__message">{{ message }}</p>
      <span id="modal-cansel" class="modal__cancel" @click="returnFalse()">
        いいえ
      </span>
      <button class="modal__btn" @click="returnTrue()">はい</button>
    </div>
    <div id="modal-overlay"></div>
  </div>
</template>

script 部分では、HelloWorld.vue から message を受け取ったり、はい / いいえの選択時に呼ばれるメソッドを定義しています。

「いいえ」なら returnFalse、「はい」なら returnTrue が呼ばれますが、単純に引数が false か true かの違いだけであって、emit する先は同じです。

Modal.vue

<script>
export default {
  name: "Modal",
  props: ["message"],
  methods: {
    returnFalse() {
      this.$emit("execute-method", false);
    },
    returnTrue() {
      this.$emit("execute-method", true);
    },
  },
};
</script>

style は何か適当です。
昔のことなのでどのサイトを参考にしたかは忘れましたが、ググればいっぱい出てくると思うので、デザインを変更したい方はいいかんじにいじってください。

Modal.vue

<style scoped>
.modal {
  padding: 10px 20px;
  border: 2px solid #a5272a;
  background: #faebd7;
  z-index: 2;
  display: block;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

.modal__message {
  margin-top: 10px;
}

.modal__cancel {
  margin-right: 30px;
  font-size: 15px;
}

.modal__cancel:hover {
  cursor: pointer;
  color: rgb(14, 48, 240);
  font-weight: bold;
}

.modal__btn {
  display: inline-block;
  margin: 30px auto;
  text-decoration: none;
  width: 80px;
  height: 30px;
  text-decoration: none;
  color: #000000;
  border: solid 2px #a5272a;
  border-radius: 3px;
  transition: 0.4s;
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  background-color: #faebd7;
}

.modal__btn:hover {
  background: #a5272a;
  color: white;
  cursor: pointer;
}

#modal-overlay {
  z-index: 1;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75);
}
</style>

まとめ

今回はその昔に Vue.js でモーダル画面を作ったものがあったので気まぐれに公開してみました。
冗長なコードだったり、変数名がイケてなかったり、デザインがヤバかったりするかもしれませんが、その辺はいいかんじに修正してください。

こんなものでもどなたかの参考になれば幸いです。

GitHub

動作サンプル

コードの中身

HelloWorld.vue

Modal.vue

まとめ

Discussion