Vue.jsでモーダルウィンドウを実装する方法 【コピペOK】

# プロジェクト名は任意です。
$ vue create vue-modal-window

# 「Manually select features 」を選択
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
❯ Manually select features 

# Vuexを追加
? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
❯◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

# 2系を選択
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x 
  3.x

# lintの設定（ここはお好みです）
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier 

# ここはお好みです
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

# package.jsonを選択
? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files 
❯ In package.json 

# N を入力
? Save this as a preset for future projects? (y/N) N

# 作成ディレクトリへ移動
$ cd vue-modal-window/

# サーバー起動
$ npm run serve

<template>
	<div class="modal">
		<div class="modal__box">
			<span class="modal__message">Message?</span>
			<div class="modal__action">
				<div class="modal__btn">キャンセル</div>
				<div class="modal__btn modal__btn--success">OK</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {}
</script>

<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.modal__box {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 500px;
	height: 200px;
	padding: 32px;
	background-color: #fff;
	border-radius: 4px;
	transform: translate(-50%, -50%);
}

.modal__message {
	font-size: 24px;
}

.modal__action {
	display: flex;
	justify-content: flex-end;
}

.modal__btn {
	width: 130px;
	margin-left: 16px;
	padding: 8px;
	line-height: 1.5;
	font-weight: bold;
	border: 1px solid rgb(196, 196, 196);
	cursor: pointer;
}

.modal__btn--success {
	color: #fff;
	border: none;
	background-color: rgb(60, 140, 245);
}
</style>

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png" />
		<HelloWorld msg="Welcome to Your Vue.js App" />
		<Modal />　 // 追加
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Modal from './components/Modal.vue' // 追加

export default {
	name: 'App',
	components: {
		HelloWorld,
		Modal,　 // 追加
	},
}
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
</style>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		modal: {
			isOpen: false,
			message: '',
		},
	},
	mutations: {},
	actions: {},
	modules: {},
})

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		modal: {
			isOpen: false,
			message: '',
		},
	},
	mutations: {
    // 追加
		commitModalOpen(state, payload) {
			state.modal = payload
		},
	},
	actions: {
    // 追加
		actionModalOpen({ commit }, payload) {
			commit('commitModalOpen', payload)
		},
	},
	modules: {},
})

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png" />
		<HelloWorld msg="Welcome to Your Vue.js App" />
		<button @click="open()">モーダルを表示する</button>　// 追加
		<Modal v-if="isOpen" />　// 追加
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Modal from './components/Modal.vue'

export default {
	name: 'App',
	components: {
		HelloWorld,
		Modal,
	},
	computed: {
    // 追加
		isOpen() {
			return this.$store.state.modal.isOpen
		},
	},
	methods: {
    // 追加
		open() {
			const payload = {
				isOpen: true,
				message: '変更しますがよろしいですか？',
			}
			this.$store.dispatch('actionModalOpen', payload)
		},
	},
}
</script>

<style>
// 省略
</style>

<template>
	<div class="modal">
		<div class="modal__box">
			<span class="modal__message">{{ message }}</span> // 修正
			<div class="modal__action">
				<div class="modal__btn">キャンセル</div>
				<div class="modal__btn modal__btn--success">OK</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	computed: {
    // 追加
		message() {
			return this.$store.state.modal.message
		},
	},
}
</script>

<style>
// 省略
</style>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		modal: {
			isOpen: false,
			message: '',
			resolve: (bool) => bool, // 追加
			reject: (bool) => bool, // 追加
		},
	},
	mutations: {
		commitModalOpen(state, payload) {
			state.modal = payload
		},
　　 // 追加
		commitResetModalState(state) {
			state.modal = {
				type: '',
				text: '',
				resolve: (bool) => bool,
				reject: (bool) => bool,
			}
		},
	},
	actions: {
		actionModalOpen({ commit }, payload) {
       // 追加
       // 1.Promiseインスタンスを生成
			return new Promise((resolve, reject) => {
				const option = {
					resolve,
					reject,
					...payload,
				}
　　　　　// 2.payloadのデータと「resolve」「reject」をstateに保存
				commit('commitModalOpen', option)
			})
		},
　　 // 追加
    // 3.モーダル内の「OK」ボタンがクリックされたら「resolve」を実行させる。
		actionModalResolve({ commit, state }) {
			state.modal.resolve(true) // 4.モーダルの呼び出し元に、実行結果を返す
			commit('commitResetModalState')
		},
　　 // 追加
    // 3.「キャンセル」ボタンなら「reject」を実行させる
		actionModalReject({ commit, state }) {
			state.modal.reject(false) // 4.モーダルの呼び出し元に、実行結果を返す
			commit('commitResetModalState')
		},
	},
	modules: {},
})

<template>
	<div class="modal">
		<div class="modal__box">
			<span class="modal__message">{{ message }}</span>
			<div class="modal__action">
				<div class="modal__btn" @click="modalReject">キャンセル</div> // 追加
				<div class="modal__btn modal__btn--success" @click="modalResolve">OK</div> // 追加
			</div>
		</div>
	</div>
</template>

<script>
export default {
	computed: {
		message() {
			return this.$store.state.modal.message
		},
	},
	methods: {
    // 追加
		modalReject() {
			this.$store.dispatch('actionModalReject', false)
		},
    // 追加
		modalResolve() {
			this.$store.dispatch('actionModalResolve', true)
		},
	},
}
</script>

<style>
// 省略
</style>

// 省略
	methods: {
		open() {
			const payload = {
				isOpen: true,
				message: '変更しますがよろしいですか？',
			}
			this.$store
				.dispatch('actionModalOpen', payload)
				.then(() => { // 追加
					// 「OK」ボタンが押された時の処理をここに書く
				})
				.catch(() => { // 追加
					// 「キャンセル」ボタンが押された時の処理をここに書く
				})
		},
	},