v-if/v-showと$vuetify.breakpointを使ってうまくレスポンシブができなかった件
こんにちは、Yuiです。
皆さんVue.jsでスマホのみサイドメニューなどを非表示にしたい場合、どうしていますか?
多分色々とやり方があるとは思うのですが、私はいつも表示非表示の切り替えは個人的に一番楽なv-if
/v-show
を使っています。
そして画面サイズによって表示・非表示を切り替えるために、v-if="$vuetify.breakpoint.xs"
というような形で簡単にレスポンシブを組んでいます。
今回、いつものようにv-if
/v-show
と$vuetify.breakpoint
を組み合わせて表示非表示を切り替えようとしたら、うまくいかなかったので、代わりにscssで調整した方法をまとめます。
$vuetify.breakpointとは?
そもそも、$vuetify.breakpoint
とはどのような書き方かというと、Vuetifyでは下記のように画面サイズがあらかじめ決められており、例えばv-if="$vuetify.breakpoint.xs"
と書くことで、その要素をスマホのみ表示にすることができます。
ちなみに、v-ifとv-showの切り替えは、v-ifがあまり頻繁に切り替えないとき、v-showは頻繁に表示非表示を切り替える場合に使うのが良いとされています。(v-ifの方が切り替えの際に負荷がかかる。)
今回起こった問題
まずはこちらを見てください。
ボタンが押すとサイドコンテンツが表示されますが、その後、ボタンが消えています。
今回は、ヘッダーの下に紫色の「開く」のボタンを置いて、そのボタンを置くとサイドコンテンツが表示されるようにしています。
PC版では、サイドコンテンツはデフォルトで表示をしているため、このボタンは表示する必要がありません。
なので、スマホでのみ表示にするためにこのように書きました。
<v-btn v-if="$vuetify.breakpoint.xs"
color="purple"
dark
@click.stop="drawer = !drawer"
>
開く
</v-btn>
〜〜〜〜
<v-navigation-drawer
v-model="drawer"
absolute
right
>
<SideComment/>
</v-navigation-drawer>
※サイドコンテンツはページをわけて、SideComment.vue
として作っています。
表示を見ると、上記の通りボタンは無事スマホでのみ表示されるものの、一度しか押せなくなってしまいました。ちなみに、今回はPCとスマホは頻繁に切り替わることもないとv-if
を使っているのですが、v-show
を使っても一度きりしか押せないのは変わりませんでした。
どうやらv-if
/v-show
と@click
の動きは併用できないようです。
※もし併用できる方法を御存知の方はひっそりと私に耳打ちしてください。笑
(少なくとも色々と調べた限りでは、v-if
/v-show
と@click
の動きを併用するのはあまり一般的ではないようでした。)
どうしたか
v-if
/v-show
が使えないとなると、scssでdisplay
設定をするしかありません。
ということで、下記
<v-btn v-if="$vuetify.breakpoint.xs"
class="sp-visible"
color="purple"
dark
@click.stop="drawer = !drawer"
>
開く
</v-btn>
〜〜〜〜
<style lang="scss" scoped>
$pc-min: 960px;
@mixin display_pc {
@media (min-width: $pc-min) {
@content;
}
}
.sp-visible {
@include display_pc {
display: none !important;
}
}
</style>
クラス名をつけて、そこにscssを適用させています。
@mixin
ははじめて使ったのですが、かなり便利でした。(参考:Sassの「@mixin(ミックスイン)」の使い方と「引数」の解説)
今回はタブレットの表示はとりあえずおいておいて、とりあえずPCでのみ非表示にすることが目的だったので、このようなざっくりとしたブレイクポイントで設定しました。
完成形
このような感じで、ボタンは押しても消えなくなったので、とりあえずは成功です。
もちろん、このままではまだまだレスポンシブとして不完全なので、引き続きレイアウトは整えますが、とりあえずは目標達成です!やったね!
今回@mixin
にかなり感動したので、またまとめたいと思います。
Author And Source
この問題について(v-if/v-showと$vuetify.breakpointを使ってうまくレスポンシブができなかった件), 我々は、より多くの情報をここで見つけました https://qiita.com/yuikoito/items/7e09e2d2134dc27e951a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .