vue Dialogを作ってみる

ポイント： CSSの要素を使うことでダイアログを実装する事ができるってことをしっておくこと。z-indexを使えば良いことさえわかればあとはボタンの制御の問題へ置き換わる。

参考にさせていただいた資料:

# ダイアログが表示されるページ

<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>

diadia

興味があることをやってみる。自分のメモを残しておきます。

vue Dialogを作ってみる