🎉

Vue2.6でライブラリーを使わずにモーダルウインドウを作ってみる🧑🏼‍🎓

2022/04/24に公開

モーダルウインドウとは?

ある要素をクリックすると画面中央にウィンドウが表示され、表示されたウィンドウ以外の背景を薄暗く表示させることでユーザに表示させたいウィンドウの内容を際立たせるための通知などに利用される技術です。通知以外にもシンプルページアプリケーションなどではモーダルウィンドウを入力フォームとしても利用します。Webの世界ではさまざまな場所で利用されているので、モーダルウィンドウという言葉を知らない人でもこの技術に触れたことのない人はいないでしょう。英語ではmodalという単語を使うので検索する場合はmodalと検索することで情報を見つけることができます。

今回参考にしたサイト

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>modalをcomponentで作る</title>
</head>

<style>
#content{
  z-index:10;
  width:50%;
  padding: 1em;
  background:#fff;
}

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

}
</style>

<body>
  <div id="app">

    <button v-on:click="openModal">Click</button>

    <open-modal v-show="showContent" v-on:from-child="closeModal">slotからモーダルウィンドウへ</open-modal>

  </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('open-modal',{
  template : `
    <div id="overlay" v-on:click="clickEvent">
        <div id="content"　 v-on:click="stopEvent">
          <p><slot></slot></p>
          <button v-on:click="clickEvent">close</button>
        </div>
    </div>
    `,
  methods :{
    clickEvent: function(){
      this.$emit('from-child')
     },
    stopEvent: function(){
      event.stopPropagation()
    }    
  }
})

new Vue({
  el: '#app',
  data: {
    showContent: false
  },
  methods:{
    openModal: function(){
      this.showContent = true
    },    
    closeModal: function(){
      this.showContent = false
    },
  }
})
</script> 
</body>
</html>

Slotとは?
slotとは親となるコンポーネント側から、子のコンポーネントのテンプレートの一部を差し込む機能です。

VueCliだと、こんな書き方をしている。

<HelloWorld />

これで、コンポーネントをviewのファイルで読み込む。

かっこいいUIを簡単に作りたい🤔

Vue.jsは日本語の情報が多いので、学習しやすい。UIフレームワークのVuetifyが人気で、新規の開発では使われることが多いそうです。
Bootstrap5使われてないらしい?自社開発だけでは😅
Vuetifyのドキュメント
https://vuetifyjs.com/ja/

最後に

Web系の会社に転職が決まりUIを作るには、どうすればいいかCSS設計で悩まされます🤔
ReactならマテリアルUI?、Vue3ならtailwindcss?、Vue2ならVuetifyかな?
SCSSも現場では結構使われいるらしいですよ。
モバイルの方がUI作りやすい😅
CSSは細かい座標を指定しないといけないから、めんどくさいよ...
Web系よりモバイルの方がいいな😵‍💫

モーダルウインドウとは?

最後に

Discussion