18.nuxt.jsとbulmaでハンバーガーメニュー:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/08] – [ナビゲーションバーのコンポーネントを作成する] adash333 | 18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/09] (現在) – [初めてのVuex目次] adash333 | ||
---|---|---|---|
行 15: | 行 15: | ||
[[18.nuxt.jsとbulmaでハンバーガーメニュー: | [[18.nuxt.jsとbulmaでハンバーガーメニュー: | ||
+ | |||
+ | [[19.nuxt.jsで画像一覧アプリ: | ||
+ | |||
+ | |||
===== すること ===== | ===== すること ===== | ||
行 22: | 行 26: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
- | + | スクリーンショット | |
- | + | {{: | |
- | Demo | + | |
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 132: | 行 136: | ||
{{: | {{: | ||
+ | |||
+ | ===== ハンバーガーメニューをトグルさせる ===== | ||
+ | 横幅を狭くすると、画面右上にハンバーガーメニューが出てきますが、それをクリックしても何も起こりません。 | ||
+ | isMenuActiveというプロパティとtoggleMenuというメソッドを定義して、ハンバーガーメニューをクリックすると、縦方向にリンクが表示されるようにします。 | ||
+ | |||
+ | < | ||
+ | < | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | export default { | ||
+ | data: () => { | ||
+ | return {isMenuActive: | ||
+ | }, | ||
+ | methods: { | ||
+ | toggleMenu () { | ||
+ | this.isMenuActive = !this.isMenuActive | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | *これで、トグルするようにはなったのですが、リンク先の飛んでも、メニューが開いたままになってしまっています。 | ||
+ | *そこで、『ページ遷移』(=リンクがクリックされる)したときに、メニューが閉じる(isMenuActiveプロパティがfalseになる)ようなプログラムを実装します。 | ||
+ | *このときに、Vuexを用いると、コンポーネント間の" | ||
+ | |||
+ | 詳細はhttps:// | ||
+ | *isMenuActiveの状態管理に、Vuexを使った方がよい | ||
+ | *Nuxt.jsアプリでは、< | ||
+ | |||
+ | ===== Vuexストアを設定する ===== | ||
+ | isMenuActiveプロパティの状態(trueかfalseか)を、Vuexストアで管理します(状態管理)。 | ||
+ | Nuxt.jsには、デフォルトの状態でVuexが入っており、store/ | ||
+ | 『クラシックモード』と、『モジュールモード』があるらしいです。 | ||
+ | |||
+ | 参考:https:// | ||
+ | {{: | ||
+ | |||
+ | store/ | ||
+ | < | ||
+ | import Vuex from ' | ||
+ | |||
+ | const store = () => new Vuex.Store({ | ||
+ | state: { | ||
+ | isMenuActive: | ||
+ | }, | ||
+ | mutations: { | ||
+ | toggleMenu (state) { | ||
+ | state.isMenuActive = !state.isMenuActive | ||
+ | }, | ||
+ | resetMenu (state) { | ||
+ | state.isMenuActive = false | ||
+ | } | ||
+ | } | ||
+ | }) | ||
+ | |||
+ | export default store | ||
+ | </ | ||
+ | {{: | ||
+ | *layouts/ | ||
+ | < | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
+ | {{: | ||
+ | *VisualStudioCodeのターミナル画面で、一度、Ctrl+C => Y => Enterで、サーバを停止したのち、再度、< | ||
+ | {{: | ||
+ | |||
+ | ===== ページ遷移したときにトグルが閉じるようにする ===== | ||
+ | |||
+ | ページ遷移したとき、すなわち、新しいページが描画されてfetch()メソッドを呼び出されたときにトグルが閉じるように(isMenuActiveがfalseになるように)します。 | ||
+ | 具体的には、各pages/ | ||
+ | < | ||
+ | < | ||
+ | export default { | ||
+ | fetch({ store }) { | ||
+ | store.commit(" | ||
+ | } | ||
+ | }; | ||
+ | </ | ||
+ | </ | ||
+ | pages/ | ||
+ | {{: | ||
+ | pages/ | ||
+ | {{: | ||
+ | pages/ | ||
+ | {{: | ||
+ | |||
+ | 今回は以上となります。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | スクリーンショット | ||
+ | {{: | ||
+ | |||
+ | ===== 今回写経させていただいたサイト ===== | ||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
行 139: | 行 263: | ||
目次: | 目次: | ||
- | 前: | + | 前:[[17.nuxt.jsのvuexでパスワード制限: |
- | 次: | + | 次:[[19.nuxt.jsで画像一覧アプリ: |
18.nuxt.jsとbulmaでハンバーガーメニュー/index.html.1549650615.txt.gz · 最終更新: 2019/02/08 by adash333