Vuetify指令未遵循我的断点

Question

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

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

当我尝试显示断点名称时，它运行良好：

{{ $vuetify.breakpoint.name }}

但是当我尝试使用某些指令（xs / sm / md / lg / xl）时，它无法按预期工作。

例如，在my demo application中，您可以看到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>

它没有按预期工作。是因为我想念这里的东西吗？

Answer 1

是的，您确实在这里错过了一些事情。根据Vue documentation：

  

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

     

  
1. 要更新样式，您将必须覆盖$grid-breakpoints手写笔变量（请参阅Modifying Stylus variables）。
  
2. 要在javascript端使用相同的值，必须在应用程序引导期间将它们传递给它们，如下所示：
  

Vue.use(Vuetify, {
  breakpoint: {
    thresholds: {
      xs: 360
    },
    scrollbarWidth: 10
  }
})

您似乎错过了步骤1。

---

触控笔和SCSS一样，是CSS预处理器。它有助于使事情井井有条，并可以进行其他有问题的重构（例如您现在需要的重构）。
您可以覆盖这些值并重建基于手写笔的程序包，从而为您的应用程序提供不同的CSS来源。