vuetify 扩展面板组件的设置 max-width

Question

我正在尝试使用 vuetify 和 nuxt 创建一个网页ui。我正在尝试设置扩展面板 ui 组件 (https://vuetifyjs.com/en/components/expansion-panels) 的 max-width 属性。我有：

<div id="app"     max-width="800">
  <v-app id="inspire"     max-width="1200"
>
    <v-expansion-panel     max-width="1200">
      <v-expansion-panel-content
        v-for="(item,i) in 5"
        :key="i"
                                     max-width="1200"

      >
        <div slot="header"     max-width="1200"
>Item</div>
        <v-card     max-width="1200">

          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>

这是一个代码笔link：

https://codepen.io/anon/pen/YBKXeL?&editable=true&editors=101

它没有任何效果，扩展面板是全宽的。我怎样才能让它工作？

Answer 1

一种快速的方法是像往常一样通过内联 CSS、style="maxWidth: 700px;

将样式直接应用于扩展面板组件

这是您代码笔中的示例： https://codepen.io/anon/pen/exOpGy

另一种方法是在 JS 端声明您的样式并使用 v-bind:style 引用它们，如下所示：

https://codepen.io/anon/pen/mvbeXd

Answer 2

我通常不喜欢使用 'style' 属性。

知道您可以像这样应用自定义 css 来验证组件：

.v-expansion-panel {
    max-width: 500px
}

vuetify 组件只是 html 元素，其中应用了一些 classes，因此您只需通过 class 访问它们的 css。另一个例子，如果你只是想将 css 应用于一个以这种方式嵌套的特定元素：（v-card inside a v-layout inside a v-container）

.v-container > .v-layout > .v-card {
    // insert css here
}

您可以检查 html 元素并查看 vuetify 添加到元素的 classes。

vuetify 扩展面板组件的设置 max-width

Setting max-width of vuetify expansion panel component

javascript

vue.js

nuxt.js

vuetify.js