Question

我只想在移动设备上添加课程。我已经在使用vuetify之前完成了此操作，但是使用vue似乎更加困难：

代码：

<div class="{'mobileSnackBar': breakpoint.xs}">
  <p> This is my snackbar </p>
</div>

可以证明您拥有$vuetify.breakpoint.xs，但是我如何通过引导获得类似的效果？或者，请推荐一种替代方法。

Answer 1

借助vuetify，您可以做到：

computed: {
    is_screen_small() {
        return this.$vuetify.breakpoint.smOnly
    },
}

并像这样组合它：

<div class="{'mobileSnackBar': is_screen_small}">
  <p> This is my snackbar </p>
</div>

请确保您阅读了breakpoints的vuetify文档，以了解更多信息。

但是据我所知，引导程序的唯一方法是使用媒体查询：

// Small devices 
@media (max-width: 760px) { 
  //Add your style here
 }

但是，有一种与引导无关的解决方案：

computed: {
  is_mobile() {
    const isMobile = window.matchMedia("only screen and (max-width: 760px)")
    return isMobile.matches ? true : false
  }
}

并像这样组合它：

<div class="{'mobileSnackBar': is_mobile}">
  <p> This is my snackbar </p>
</div>

Answer 2

引导程序的另一种方法是使用断点类显示/隐藏元素，如下所示：

<div class="mobileSnackBar d-sm-none">
   <p> This is my snackbar </p>
</div>
<div class="d-none d-sm-block">
   <p> This is my snackbar </p>
</div>

使组件比html更具意义，甚至可能不是最干净的解决方案，但它确实有效。

仅在移动设备上添加类-Vue.js和Bootstrap

2 个答案: