Vue2.6でライブラリーを使わずにモーダルウインドウを作ってみる🧑🏼🎓
モーダルウインドウとは?
ある要素をクリックすると画面中央にウィンドウが表示され、表示されたウィンドウ以外の背景を薄暗く表示させることでユーザに表示させたいウィンドウの内容を際立たせるための通知などに利用される技術です。通知以外にもシンプルページアプリケーションなどではモーダルウィンドウを入力フォームとしても利用します。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のドキュメント
最後に
Web系の会社に転職が決まりUIを作るには、どうすればいいかCSS設計で悩まされます🤔
ReactならマテリアルUI?、Vue3ならtailwindcss?、Vue2ならVuetifyかな?
SCSSも現場では結構使われいるらしいですよ。
モバイルの方がUI作りやすい😅
CSSは細かい座標を指定しないといけないから、めんどくさいよ...
Web系よりモバイルの方がいいな😵💫
Author And Source
この問題について(Vue2.6でライブラリーを使わずにモーダルウインドウを作ってみる🧑🏼🎓), 我々は、より多くの情報をここで見つけました https://zenn.dev/joo_hashi/articles/f92813874da7b3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol