2017-08-12

vue-awesome-swiper でメニューバーをstickyに表示したい

Vuejs CSS

updated: 2018/2/21

vue-awesome-swiperはflexboxを使っている。

cssに追加

.swiper-wrapper {

　　display: flex !important;

　　align-item: flex-start;

}

→→　フレックスボックスの上端をそろえる

.swiper-container {

　　overflow: visible !important;

}

→→　デフォルトでvue-awesome-swiperはoverflow: hiddenになっているので修正

.menu {
　　position: sticky;

　　top: 0;

}

参考：

var.blog.jp

monteecristoo.hatenablog.com

2017-08-08

Windowsコマンドプロンプトから空のファイルを作成

type nul > test.html

2017-08-03

metismenu + vueJs スクリーンサイズに応じて切り替えたい場合

UI Vuejs Javascript

updated: 2018/4/25

metismenu ・・・ class metismenuが複数あると2つ目がエラー？？？

大画面ではサイドに固定されたmetismenuが使いたい
モバイルではスワイプでmetismenuを使ったサイドバーを表示させたい

2種類のサイドバーを用意して画面サイズごとに切り替えたい

→→　

display: none で表示を調整してもDOMが残っているとエラーが出るのでDOMごと消して切り替える

solution: v-if (DOMごと消える)　** v-showはDOMが残る

________________________________________________

<div class="large-sidenavbar">
　　<div v-if=" isLarge === true ">
　　　　<sidenavbar></sidenavbar> ・・・metismenu①
　　</div>
</div>

_________________________________________________

<swiper :options="swiperOption" ref="swiper">
　　<swiper-slide class="menu">
　　　　<sidenavbar></sidenavbar>・・・metismenu②
　　</swiper-slide>
　　<swiper-slide class="content"></swiper-slide>

</swiper>

____________________________________________________

computed: {
　　isLarge() {
　　　　if(window.matchMedia('(min-width: 1024px)').matches)
　　　　{
　　　　　　return true;
　　　　} else
　　　　{
　　　　　　return false;
　　　　}
　　}
}

</script>

<style>

　　@media (min-width: 1024px) {
　　　　.menu, .menu-button {
　　　　　　display: none;
　　　　}
　　}

</style>

2つ目はdisplay: noneで処理しても1つ目でエラーが出ない

DOMの消去とdisplay:none

DOMの消去はtoggleした時のコストが大きい、display:noneはtoggleコストは小さいがページロード時のイニシャルコストが大きい。そのため一長一短。

javascriptで画面サイズを取得

参考:

dev.mozilla.jp

qiita.com

追記：