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

Question

因此，我一直使用布菲作为这个新项目的UI库，并且我来自香格里特背景。

我想要实现的是使用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>