vue Dialogを作ってみる
ポイント: CSSの要素を使うことでダイアログを実装する事ができるってことをしっておくこと。z-indexを使えば良いことさえわかればあとはボタンの制御の問題へ置き換わる。
参考にさせていただいた資料:
vue.js モーダルウィンドウ実装でコンポーネント理解 | アールエフェクト
# ダイアログが表示されるページ <template> <div id='base' :class="{overlay: overlay}"> <button @click='onClickDialog'>ダイアログを表示する</button> <TestDialog id='dialog' v-show='shouldShow'/> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import TestDialog from '@/components/TestDialog.vue'; @Component({ components: { TestDialog }, }) export default class TestDialogUnder extends Vue { private overlay = false; private shouldShow = false; private onClickDialog(): void{ console.warn('ふぁふぁっふぁ'); this.shouldShow = !this.shouldShow; console.warn(this.shouldShow); if (!this.overlay){ this.overlay = true; }else {this.overlay = false} } } </script> <style> .overlay{ /*要素を重ねた時の順番*/ z-index:1; /*画面全体を覆う設定*/ position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); /*画面の中央に要素を表示させる設定*/ display: flex; align-items: center; justify-content: center; } #dialog{ z-index:2; width:50%; padding: 1em; background:#fff; } </style>
// TestDialog import { Component, Vue } from 'vue-property-decorator'; @Component({ components: {}, }) export default class TestDialog extends Vue { }
<template> <div> <p>コレはダイアログです</p> </div> </template> <script lang='ts'> import TestDialog from '@/components/TestDialog'; export default TestDialog </script>