1

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

这是我的 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>
4

3 回答 3

0

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

编辑 尝试放置const tst = this.widthChange;在 mosnted 钩子中

于 2019-10-30T13:52:53.340 回答
0

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

相反，您需要使用 data 属性并在挂载的钩子中初始化您的侦听器：

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

并在表格中使用它：

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

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

于 2019-10-30T14:10:12.553 回答
0

一年后，我做了一个小小的调整，让它在 Vuejs 中用于移动/桌面用途：

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数据选项，您可以很好地调整大小。

希望这可以帮助任何人

于 2020-10-03T01:30:18.250 回答