文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使vuetify扩展面板成为独立的？

问如何使vuetify扩展面板成为独立的？
EN

Stack Overflow用户

提问于 2019-09-30 14:32:09

回答 2查看 215关注 0票数 0

如何使vuetify扩展面板只打开一个面板？现在，我可以关闭所有的面板，这是一个问题。我想留在最后一个开着的面板上。

如果我点击了opend面板，我希望不能关闭打开的面板。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.19/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.19/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-expansion-panels accordion>
        <v-expansion-panel
          v-for="(item,i) in 5"
          :key="i"
        >
          <v-expansion-panel-header>Item</v-expansion-panel-header>
          <v-expansion-panel-content>
            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-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-row>
  </v-app>
</div>

Here is my code on CodePen

vue.js

vuetify.js

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-09-30 15:26:18

尝尝这个。https://codepen.io/kdydesign/pen/BaBeeVO?editors=1011

<v-expansion-panels v-model="panel">
  <v-expansion-panel
        v-for="(item,i) in 5"
        :key="i"
        @click="expanded(i)"
  >
     ......
  </v-expansion-panel>
</v-expansion-panels>

data () {
  return {
    panel: []
  }
},
methods: {
  expanded (index) {
    this.panel = []
    this.panel.push(index)
  }

票数 2

Stack Overflow用户

发布于 2019-09-30 14:55:34

new Vue({
  el: '#app',
  vuetify: new Vuetify()
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.19/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.19/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-expansion-panels accordion multiple>
        <v-expansion-panel
          v-for="(item,i) in 5"
          :key="i"
        >
          <v-expansion-panel-header>Item</v-expansion-panel-header>
          <v-expansion-panel-content>
            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-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-row>
  </v-app>
</div>

只需添加一个multiple属性即可。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58162550

复制

相似问题

问如何使vuetify扩展面板成为独立的？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使vuetify扩展面板成为独立的？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使vuetify扩展面板成为独立的？
EN