以下の様な仕様に沿って実装しているのですが、上手く動作しない為、アドバイスを頂けないでしょうか。
■仕様
・ブラウザサイズが1200px以上の場合
└サイドバーは固定表示
└サイドバーにあるモーダルのトリガーボタンは非表示
・ブラウザサイズが1200px以下の場合
└サイドバーをモーダルとして実装
諸々の実装は出来たのですが、サイドバーの表示がモーダル機能と紐づいてしまっている為、
1200px以上になるとサイドバーの表示がされなくなってしまいます。
<template> <div class="p-mypage-message__sidebar"> <a class="p-mypage-message__sidebar--nav" :class="{ _open: menuFlag }" @click="menuToggle">ぼたん</a> <transition name="fade"> <div class="p-mypage-message__sidebar--main" v-show="menuFlag"> <p>なかみ</p> </div> </transition> </div> </template> <script> export default { data() { return { menuFlag: false, window: { width: 0, } } }, created() { window.addEventListener('resize', this.handleResize) this.handleResize(); }, destroyed() { window.removeEventListener('resize', this.handleResize) }, methods: { handleResize() { this.window.width = window.innerWidth; }, menuToggle() { this.menuFlag = !this.menuFlag; if(this.window.width < 1200) { this.menuFlag = this.menuFlag; } else { this.menuFlag = !this.menuFlag; } } } } </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。