如何根据 Buefy 断点动态设置元素的 class

Question

所以我一直在使用Buefy as an UI library for this new project and I come from a Vuetify后台。

我想用Buefy实现的是：

<div
  :class="{
    'ml-2': (condition to apply the class to mobile breakpoint)
  }"
>
...

在 Vuetify 中我会这样写代码：

<div
  :class="{
    'ml-2': $vuetify.breakpoint.mobile,
  }"
>
...

Buefy 中是否有等效的解决方案？

Answer 1

我查看了 Buefy 的文档，它似乎没有断点功能。

您可以通过创建插件或仅在组件中添加以下内容来自己手动完成：

<script>
export default {
  data() {
    return {
      isMobile: false,
    }
  },

  mounted() {
    const mediaQuery = window.matchMedia('(min-width: 1024px)');

    // Set initial value on first load.
    this.isMobile = !mediaQuery.matches

    // Listen for changes
    mediaQuery.addEventListener('change', event => {
      if (event.matches) {
        console.log('>= 1024px');
        this.isMobile = false;
      } else {
        console.log('< 1024px');
        this.isMobile = true;
      }
    })
  }
}
</script>

如何根据 Buefy 断点动态设置元素的 class

How to dynamic set element's class depending on Buefy breakpoint

vue.js

responsive

buefy