Vue.js Vuetify指令不遵循我的断点

在vuetify应用程序中，我将自定义断点定义如下：

Vue.use(Vuetify, {
  breakpoint: {
    thresholds: {
      xs: 576,
      sm: 768,
      md: 1024,
      lg: 1400,
    },
  },
});

当我尝试显示断点的名称时，它工作得很好：

{{ $vuetify.breakpoint.name }}

但是当我尝试使用一些指令（xs/sm/md/lg/xl）时，它并没有像预期的那样工作

例如，在中，您可以看到im处于

sm

模式，其行为类似于

xs

模式

<v-layout row wrap>
            <v-flex
              v-for="item in [1,2,3,4]"
              :key="item"
              style="height:400px;border:1px solid red;"
              xs12
              sm6
              lg4
    ></v-flex>
</v-layout>

---

这不是预期的效果。是因为我错过了一些东西吗？

是的，你确实错过了一些东西。根据Vue：

您可以定义自己的断点阈值像素值，但目前这是一个两步过程：

要更新样式，您必须覆盖

$grid breakpoints

手写笔变量（请参阅）

要在javascript端使用相同的值，必须在应用程序引导过程中传递它们，如下所示：

Vue.use（Vuetify{
断点：{
阈值：{
xs:360
},
滚动条宽度：10
}
})

看起来你错过了第一步。

---

与SCSS一样，手写笔也是CSS预处理器。它有助于保持事物的有序性，并允许进行其他有问题的重构（如您现在需要的重构）。

---

您可以覆盖这些值并重新构建基于手写笔的软件包，从而为您的应用程序生成不同的CSS源。

您有没有想过这一点？我也有同样的问题，是的。可能的解决方案是，检查是否有缩放（ctrl+0）将重置。是的-完成了。由于某些原因，

不观察断点，而

观察断点。我想我遇到了一个真正的错误。有趣的是，后者既没有观察到我的断点，也没有观察到Vuetify断点，即使缩放为100%。这里发生了一些非常不稳定的事情。