如何在 Vuetify 中使用断点为不同的屏幕尺寸指定不同的边距

Posted 2023-02-16

【中文标题】如何在 Vuetify 中使用断点为不同的屏幕尺寸指定不同的边距

【英文标题】：How to specify different margin for different screen sizes using breakpoint in Vuetify

【发布时间】：2018-06-16 15:50:50

【问题描述】：

问题：

我有一个循环显示指定数量的卡片。

问题在于<v-flex> 中的ma-5 属性。在xs 屏幕尺寸上，此边距太大。如何为不同的屏幕尺寸指定不同的边距？

代码：

   <v-container>
      <v-layout row wrap>
        <v-flex xs12 sm6 md4 ma-5 v-for="card in filteredCards" :key="card.id">
          <v-card flat class="elevation-20 test">
            <v-card-media :src="card.image" >
            </v-card-media>
            <v-card-title primary-title class="pa-4">
               <div>
                  <h3 class="headline mb-0">card.title</h3>
                  <div style="min-height:50px;">card.description</div>
               </div>
            </v-card-title>
          </v-card>
        </v-flex>
      </v-layout>
   </v-container>

试过了：

---

我尝试在下面添加此代码（复制自 this 页面）

<v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id"
   :class="'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp">

我收到以下错误：

[Vue warn]: Property or method "$breakpoint" is not defined on the instance but referenced during render

[Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"

TypeError: Cannot read property 'smAndDown' of undefined

---

【参考方案1】：

$vuetify.breakpoint.smAndDown

通知$vuetify

在你的情况下：

<v-flex 
    v-for="card in filteredCards"
    :key="card.id"
    :class="'ma-0': $vuetify.breakpoint.smAndDown, 'ma-5': $vuetify.breakpoint.mdAndUp"
    xs12 sm6 md4  
>

检查docs（断点对象）

【讨论】：

啊！太棒了，它有效。谢谢！我希望它会在 Vuetify 文档中的某个地方。

糟糕，我现在看到了，我一直在那个页面上寻找它，但我正在浏览 API 部分，不知道您实际上可以使用 $vuetify.breakpoint。很高兴知道，谢谢

@Traxo 感谢您的提示。来这里寻找如何基于断点以编程方式更改按钮样式的东西。完成此操作：<v-btn :block="$vuetify.breakpoint.smAndDown">Send</v-btn>

这种方法的问题是，如果你是服务器端渲染，当客户端水合时，填充会“跳跃”。希望有一天会有一个纯 CSS 的解决方案。

@AmritKahlon 似乎是一个相关问题：github.com/vuetifyjs/vuetify/issues/3436 尝试看看解决方法是否适合您，我还没有尝试过。还有相关问题：***.com/questions/50991071/…

【参考方案2】：

帮助类在给定断点处应用边距或填充。可以使用以下格式应用这些类：propertydirection-breakpoint-size。

【讨论】：

示例 mx-md-2 , py-sm-4

【参考方案3】：

现在有一个更简单的方法：

<v-card 
  v-for="card in filteredCards"
  :key="card.id"
  class="ma-0 ma-md-5"
>
card.title
</v-card>

XS 和 SM 的边距为 0，MD 及以上的边距为 5