Question

使用vuetify断点在网站的移动版式和桌面版式之间切换

我的代码是（缩小了（

        <v-layout wrap :column="mobile">
           .
           .
           components and stuff
           .
           .
        <v-layout>

        <script>
           .
           .
           computed: {
             mobile: function () {
               return ['xs', 'sm'].includes(this.$vuetify.breakpoint.name)
             }
           }
           .
           .
        </script>

因此，我使用计算功能来确定客户端是否有小屏幕

我的问题是this.$vuetify.breakpoint.name最初设置为xs

目前，我的解决方法是使用loaded方法，并且在顶层执行

<v-app v-if="loaded"
  .
  .
    <v-layout>
      .
    </v-layout>
  .
  .
<v-app>

但是现在我还必须用<NoSsr>

包裹整个内容

是否存在更正确的方法来正确加载组件，以使它们在页面完全加载后不会从Mobie版本跳转到完整版本？

Answer 1

建议使用通用的变通方法here使用mounted()钩子设置某种形式的标志，并将其在computed内部进行检查：

data: () => ({
  //  ...
  isMounted: false
}),
mounted() {
  this.isMounted = true;
},
// ...
computed: {
  mobile: function () {
      return this.isMounted && ['xs', 'sm'].includes(this.$vuetify.breakpoint.name);
  }
}

或者，您可以使用其他任何方式尽早设置此mobile detection标志。

Nuxt + Vue + Vuetify：this。$ vuetify.breakpoint错误地初始化为'xs'

1 个答案: