使用 matchMedia 函数计算 属性 Vue.js

Question

我在 Vue 的计算 属性 中编写的 matchMedia 函数有一些问题。问题是当我load/refresh页面时，该功能不起作用。 只有在我在浏览器的响应式设计模式下调整屏幕大小后，它才恢复工作。

这里是我的代码 app.js

     computed: {
        widthChange() {
            if (matchMedia) {
                    var mqT = window.matchMedia(" (max-width: 850px) and (min-width: 600px) ")

                    function changeWidthT(mqT) {
                    const sectionRight = document.querySelector(".section-right")
                    if (mqT.matches) {
                        sectionRight.classList.remove("col-7")
                    }
                    else {
                        sectionRight.classList.add("col-7")
                    }
                }

                mqT.addListener(changeWidthT)
            }
        }
    },

我在页面的父级内部调用计算的 属性

<div class="frontpage-parent" :class="widthChange">...
</div>

Answer 1

您是否尝试过在挂载的钩子中调用 widthChange() 以便它在加载时运行？

编辑 尝试将 const tst = this.widthChange; 放在挂钩

中

Answer 2

您在此处滥用 computed 属性。他们应该是吸气剂，这意味着他们只是 return 准备起诉价值。您实际上是在此处附加事件侦听器。

相反，您需要使用数据属性并在 mounted 钩子中初始化您的侦听器：

export default {
  name: 'Blah',
  data () {
    const tabletViewQuery = matchMedia('...')
    return {
      tabletViewQuery: tabletViewQuery.
      tabletView: tableViewQuery.matches,
    }  
  },
  mounted () {
     this.tabletViewQuery.addListener(() => {
       this.tabletView = tableViewQuery.matches
     }
  }
}

并在 table:

中使用它

<div class="section-right" :class="{ 'col-7': tabletView }">

但是，可能更简洁的解决方案是使用 vue-match-media 插件。

Answer 3

一年后，我做了一个小调整，使其在 Vuejs 中工作，用于 mobile/desktop 目的：

computed: {
...
...
      widthChange() {
        if (matchMedia) {
          const matchMediaQuery = window.matchMedia(" (max-width: 1024px) ")
          const changeWidthT = (matchMediaQuery) => {
            this.isMobileExperience = matchMediaQuery.matches ? true : false;
          }
          mqT.addListener(changeWidthT)
        }
      }
    },
    mounted() { 
      const awakeResizeListener = this.widthChange;
    },
...
...

通过 v-if 和 v-else 评估 isMobileExperience 数据选项，您可以很好地调整大小。

希望对大家有所帮助

Answer 4

matchMedia 在具有反应性的 Vue 中

上述答案对我不起作用。通过将已弃用的 addListener 替换为 change 事件改进了 BroiSatse 的回答，如 https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

中所述

Vue 选项 API 使用 Typescript 示例：

data(): { mediaQuery: MediaQueryList; isTablet: boolean; } {
    const mediaQuery = window.matchMedia('(max-width: 1024px)');

    return {
        mediaQuery,
        isTablet: mediaQuery.matches
    };
},
mounted(): void {
    this.mediaQuery.addEventListener('change', () => {
        this.isTablet = this.mediaQuery.matches;
    });
}