代码之家 › 专栏 › 技术社区 › user1592380

设置Vuetify扩展面板组件的最大宽度

nuxt.js vuetify.js vue.js javascript

0

user1592380 · 技术社区 · 7 年前

我正在尝试用vuetify和nuxt创建一个网页。我正在尝试设置扩展面板UI组件的“最大宽度”属性( https://vuetifyjs.com/en/components/expansion-panels )我有:

<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>

这里有一个代码笔链接:

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

它没有效果,并且扩展面板是全宽的。我怎样才能让这个工作?

1 回复 | 直到 7 年前

1

Barzev 7 年前

一种快速的方法是像往常一样直接将样式应用到扩展面板组件中,使用内嵌CSS, style="maxWidth: 700px;

下面是代码笔中的示例: https://codepen.io/anon/pen/exOpGy

另一种方法是在JS端声明样式并用 v-bind:style ,像这样:

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