扩展面板

v-expansion-panel 组件对于减少大量信息的垂直空间非常有用。该组件的默认功能是一次仅显示一个展开面板主题。但是使用 expandable 属性后，扩展面板会保持打开状态，直到被显式关闭。

用例

最简单的扩展面板显示可扩展项目的列表。

template

  1. <template>
  2.   <v-expansion-panels>
  3.     <v-expansion-panel
  4.       v-for="(item,i) in 5"
  5.       :key="i"
  6.     >
  7.       <v-expansion-panel-header>Item</v-expansion-panel-header>
  8.       <v-expansion-panel-content>
  9.         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.
  10.       </v-expansion-panel-content>
  11.     </v-expansion-panel>
  12.   </v-expansion-panels>
  13. </template>

Expansion panels（扩展面板） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Expansion panels（扩展面板） - 图2

实战场

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-row justify="space-around">
  4.       <v-switch v-model="accordion" class="ma-2" label="Accordion"></v-switch>
  5.       <v-switch v-model="popout" class="ma-2" label="Popout"></v-switch>
  6.       <v-switch v-model="inset" class="ma-2" label="Inset"></v-switch>
  7.       <v-switch v-model="multiple" class="ma-2" label="Multiple"></v-switch>
  8.       <v-switch v-model="disabled" class="ma-2" label="Disabled"></v-switch>
  9.       <v-switch v-model="readonly" class="ma-2" label="Readonly"></v-switch>
  10.       <v-switch v-model="focusable" class="ma-2" label="Focusable"></v-switch>
  11.       <v-switch v-model="flat" class="ma-2" label="Flat"></v-switch>
  12.       <v-switch v-model="hover" class="ma-2" label="Hover"></v-switch>
  13.       <v-switch v-model="tile" class="ma-2" label="Tile"></v-switch>
  14.     </v-row>
  16.     <v-expansion-panels
  17.       :accordion="accordion"
  18.       :popout="popout"
  19.       :inset="inset"
  20.       :multiple="multiple"
  21.       :focusable="focusable"
  22.       :disabled="disabled"
  23.       :readonly="readonly"
  24.       :flat="flat"
  25.       :hover="hover"
  26.       :tile="tile"
  27.     >
  28.       <v-expansion-panel
  29.         v-for="(item,i) in 5"
  30.         :key="i"
  31.       >
  32.         <v-expansion-panel-header>Item</v-expansion-panel-header>
  33.         <v-expansion-panel-content>
  34.           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.
  35.         </v-expansion-panel-content>
  36.       </v-expansion-panel>
  37.     </v-expansion-panels>
  38.   </v-row>
  39. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       accordion: false,
  5.       popout: false,
  6.       inset: false,
  7.       multiple: false,
  8.       disabled: false,
  9.       readonly: false,
  10.       focusable: false,
  11.       flat: false,
  12.       hover: false,
  13.       tile: false,
  14.     }),
  15.   }
  16. </script>

Expansion panels（扩展面板） - 图3

示例

下面是一些简单到复杂的例子。

禁用

扩展面板及其内容都可以使用 disabled 属性禁用。

template script

  1. <template>
  2.   <div>
  3.     <div class="d-flex">
  4.       <v-checkbox
  5.         v-model="disabled"
  6.         label="Disabled"
  7.       ></v-checkbox>
  8.     </div>
  10.     <v-expansion-panels
  11.       v-model="panel"
  12.       :disabled="disabled"
  13.       multiple
  14.     >
  15.       <v-expansion-panel>
  16.         <v-expansion-panel-header>Panel 1</v-expansion-panel-header>
  17.         <v-expansion-panel-content>
  18.           Some content
  19.         </v-expansion-panel-content>
  20.       </v-expansion-panel>
  22.       <v-expansion-panel>
  23.         <v-expansion-panel-header>Panel 2</v-expansion-panel-header>
  24.         <v-expansion-panel-content>
  25.           Some content
  26.         </v-expansion-panel-content>
  27.       </v-expansion-panel>
  29.       <v-expansion-panel>
  30.         <v-expansion-panel-header>Panel 3</v-expansion-panel-header>
  31.         <v-expansion-panel-content>
  32.           Some content
  33.         </v-expansion-panel-content>
  34.       </v-expansion-panel>
  35.     </v-expansion-panels>
  36.   </div>
  37. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       panel: [0, 1],
  5.       disabled: false,
  6.       readonly: false,
  7.     }),
  8.   }
  9. </script>

Expansion panels（扩展面板） - 图4

只读

readonly 属性做了与 disabled 相同的事情，但不涉及样式。

template script

  1. <template>
  2.   <div>
  3.     <div class="d-flex">
  4.       <v-checkbox
  5.         v-model="readonly"
  6.         label="Readonly"
  7.       ></v-checkbox>
  8.     </div>
  10.     <v-expansion-panels
  11.       v-model="panel"
  12.       :readonly="readonly"
  13.       multiple
  14.     >
  15.       <v-expansion-panel>
  16.         <v-expansion-panel-header>Panel 1</v-expansion-panel-header>
  17.         <v-expansion-panel-content>
  18.           Some content
  19.         </v-expansion-panel-content>
  20.       </v-expansion-panel>
  22.       <v-expansion-panel>
  23.         <v-expansion-panel-header>Panel 2</v-expansion-panel-header>
  24.         <v-expansion-panel-content>
  25.           Some content
  26.         </v-expansion-panel-content>
  27.       </v-expansion-panel>
  29.       <v-expansion-panel>
  30.         <v-expansion-panel-header>Panel 3</v-expansion-panel-header>
  31.         <v-expansion-panel-content>
  32.           Some content
  33.         </v-expansion-panel-content>
  34.       </v-expansion-panel>
  35.     </v-expansion-panels>
  36.   </div>
  37. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       panel: [0, 1],
  5.       readonly: false,
  6.     }),
  7.   }
  8. </script>

Expansion panels（扩展面板） - 图5

弹出

扩展面板还具有 popout 设计。 有了它，激活后扩展面板就会扩大。

template

  1. <template>
  2.   <v-row justify="center">
  3.     <v-expansion-panels popout>
  4.       <v-expansion-panel
  5.         v-for="(item,i) in 5"
  6.         :key="i"
  7.       >
  8.         <v-expansion-panel-header>Item</v-expansion-panel-header>
  9.         <v-expansion-panel-content>
  10.           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.
  11.         </v-expansion-panel-content>
  12.       </v-expansion-panel>
  13.     </v-expansion-panels>
  14.   </v-row>
  15. </template>

Expansion panels（扩展面板） - 图6

嵌入

inset 激活时的扩展面板将会变得更小。

template

  1. <template>
  2.   <v-row justify="center">
  3.     <v-expansion-panels inset>
  4.       <v-expansion-panel
  5.         v-for="(item,i) in 5"
  6.         :key="i"
  7.       >
  8.         <v-expansion-panel-header>Item</v-expansion-panel-header>
  9.         <v-expansion-panel-content>
  10.           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.
  11.         </v-expansion-panel-content>
  12.       </v-expansion-panel>
  13.     </v-expansion-panels>
  14.   </v-row>
  15. </template>

Expansion panels（扩展面板） - 图7

手风琴

accordion 激活时，当前扩展面板将不会产生边距。

template

  1. <template>
  2.   <v-row justify="center">
  3.     <v-expansion-panels accordion>
  4.       <v-expansion-panel
  5.         v-for="(item,i) in 5"
  6.         :key="i"
  7.       >
  8.         <v-expansion-panel-header>Item</v-expansion-panel-header>
  9.         <v-expansion-panel-content>
  10.           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.
  11.         </v-expansion-panel-content>
  12.       </v-expansion-panel>
  13.     </v-expansion-panels>
  14.   </v-row>
  15. </template>

Expansion panels（扩展面板） - 图8

Daedal Theme Free

Daedal Theme Free — is a carefully crafted multi-purpose, responsive, and gorgeous theme.

ads by Vuetify

](https://store.vuetifyjs.com/product/daedal-responsive-multi-purpose-theme-free?ref=vuetifyjs.com)

聚焦

扩展面板头部可以通过 focusable 属性进行聚焦。

template

  1. <template>
  2.   <v-expansion-panels focusable>
  3.     <v-expansion-panel
  4.       v-for="(item,i) in 5"
  5.       :key="i"
  6.     >
  7.       <v-expansion-panel-header>Item</v-expansion-panel-header>
  8.       <v-expansion-panel-content>
  9.         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.
  10.       </v-expansion-panel-content>
  11.     </v-expansion-panel>
  12.   </v-expansion-panels>
  13. </template>

Expansion panels（扩展面板） - 图9

外部控制

扩展面板可以通过修改 v-model 从外部进行控制。 它的值对应于当前打开的扩展面板内容的从零开始的索引。 如果使用 multiple 属性，那么它是一个包含未清项目索引的数组。

template script

  1. <template>
  2.   <div>
  3.     <div class="text-center d-flex pb-4">
  4.       <v-btn @click="all">all</v-btn>
  5.       <div>{{ panel }}</div>
  6.       <v-btn @click="none">none</v-btn>
  7.     </div>
  9.     <v-expansion-panels
  10.       v-model="panel"
  11.       multiple
  12.     >
  13.       <v-expansion-panel
  14.         v-for="(item,i) in items"
  15.         :key="i"
  16.       >
  17.         <v-expansion-panel-header>Header {{ item }}</v-expansion-panel-header>
  18.         <v-expansion-panel-content>
  19.           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.
  20.         </v-expansion-panel-content>
  21.       </v-expansion-panel>
  22.     </v-expansion-panels>
  23.   </div>
  24. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         panel: [],
  6.         items: 5,
  7.       }
  8.     },
  9.     methods: {
  10.       // Create an array the length of our items
  11.       // with all values as true
  12.       all () {
  13.         this.panel = [...Array(this.items).keys()].map((k, i) => i)
  14.       },
  15.       // Reset the panel
  16.       none () {
  17.         this.panel = []
  18.       },
  19.     },
  20.   }
  21. </script>

Expansion panels（扩展面板） - 图10

自定义图标

展开动作的图标可以通过 expand-icon 属性或 actions 插槽进行自定义。

template

  1. <template>
  2.   <div>
  3.     <v-expansion-panels class="mb-6">
  4.       <v-expansion-panel
  5.         v-for="(item,i) in 5"
  6.         :key="i"
  7.       >
  8.         <v-expansion-panel-header expand-icon="mdi-menu-down">Item</v-expansion-panel-header>
  9.         <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>
  10.       </v-expansion-panel>
  11.     </v-expansion-panels>
  13.     <v-expansion-panels>
  14.       <v-expansion-panel>
  15.         <v-expansion-panel-header>
  16.           Item
  17.           <template v-slot:actions>
  18.             <v-icon color="primary">$expand</v-icon>
  19.           </template>
  20.         </v-expansion-panel-header>
  21.         <v-expansion-panel-content>
  22.           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.
  23.         </v-expansion-panel-content>
  24.       </v-expansion-panel>
  26.       <v-expansion-panel>
  27.         <v-expansion-panel-header disable-icon-rotate>
  28.           Item
  29.           <template v-slot:actions>
  30.             <v-icon color="teal">mdi-check</v-icon>
  31.           </template>
  32.         </v-expansion-panel-header>
  33.         <v-expansion-panel-content>
  34.           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.
  35.         </v-expansion-panel-content>
  36.       </v-expansion-panel>
  38.       <v-expansion-panel>
  39.         <v-expansion-panel-header disable-icon-rotate>
  40.           Item
  41.           <template v-slot:actions>
  42.             <v-icon color="error">mdi-alert-circle</v-icon>
  43.           </template>
  44.         </v-expansion-panel-header>
  45.         <v-expansion-panel-content>
  46.           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.
  47.         </v-expansion-panel-content>
  48.       </v-expansion-panel>
  49.     </v-expansion-panels>
  50.   </div>
  51. </template>

Expansion panels（扩展面板） - 图11

高级版

扩展面板组件为构建真正高级的实现提供了丰富的平台。在这里，我们利用 v-expansion-panel-header 组件中的插槽，通过淡入淡出内容来响应打开或关闭的状态。

template script

  1. <template>
  2.   <v-expansion-panels>
  3.     <v-expansion-panel>
  4.       <v-expansion-panel-header>
  5.         <template v-slot:default="{ open }">
  6.           <v-row no-gutters>
  7.             <v-col cols="4">Trip name</v-col>
  8.             <v-col
  9.               cols="8"
  10.               class="text--secondary"
  11.             >
  12.               <v-fade-transition leave-absolute>
  13.                 <span
  14.                   v-if="open"
  15.                   key="0"
  16.                 >
  17.                   Enter a name for the trip
  18.                 </span>
  19.                 <span
  20.                   v-else
  21.                   key="1"
  22.                 >
  23.                   {{ trip.name }}
  24.                 </span>
  25.               </v-fade-transition>
  26.             </v-col>
  27.           </v-row>
  28.         </template>
  29.       </v-expansion-panel-header>
  30.       <v-expansion-panel-content>
  31.         <v-text-field
  32.           v-model="trip.name"
  33.           placeholder="Caribbean Cruise"
  34.         ></v-text-field>
  35.       </v-expansion-panel-content>
  36.     </v-expansion-panel>
  38.     <v-expansion-panel>
  39.       <v-expansion-panel-header v-slot="{ open }">
  40.         <v-row no-gutters>
  41.           <v-col cols="4">Location</v-col>
  42.           <v-col
  43.             cols="8"
  44.             class="text--secondary"
  45.           >
  46.             <v-fade-transition leave-absolute>
  47.               <span
  48.                 v-if="open"
  49.                 key="0"
  50.               >
  51.                 Select trip destination
  52.               </span>
  53.               <span
  54.                 v-else
  55.                 key="1"
  56.               >
  57.                 {{ trip.location }}
  58.               </span>
  59.             </v-fade-transition>
  60.           </v-col>
  61.         </v-row>
  62.       </v-expansion-panel-header>
  63.       <v-expansion-panel-content>
  64.         <v-row no-gutters>
  65.           <v-spacer></v-spacer>
  66.           <v-col cols="5">
  67.             <v-select
  68.               v-model="trip.location"
  69.               :items="locations"
  70.               chips
  71.               flat
  72.               solo
  73.             ></v-select>
  74.           </v-col>
  76.           <v-divider
  77.             vertical
  78.             class="mx-4"
  79.           ></v-divider>
  81.           <v-col cols="3">
  82.             Select your destination of choice
  83.             <br>
  84.             <a href="javascript:void(0)">Learn more</a>
  85.           </v-col>
  86.         </v-row>
  88.         <v-card-actions>
  89.           <v-spacer></v-spacer>
  90.           <v-btn
  91.             text
  92.             color="secondary"
  93.           >
  94.             Cancel
  95.           </v-btn>
  96.           <v-btn
  97.             text
  98.             color="primary"
  99.           >
  100.             Save
  101.           </v-btn>
  102.         </v-card-actions>
  103.       </v-expansion-panel-content>
  104.     </v-expansion-panel>
  106.     <v-expansion-panel>
  107.       <v-expansion-panel-header v-slot="{ open }">
  108.         <v-row no-gutters>
  109.           <v-col cols="4">Start and end dates</v-col>
  110.           <v-col
  111.             cols="8"
  112.             class="text--secondary"
  113.           >
  114.             <v-fade-transition leave-absolute>
  115.               <span v-if="open">When do you want to travel?</span>
  116.               <v-row
  117.                 v-else
  118.                 no-gutters
  119.                 style="width: 100%"
  120.               >
  121.                 <v-col cols="6">Start date: {{ trip.start || 'Not set' }}</v-col>
  122.                 <v-col cols="6">End date: {{ trip.end || 'Not set' }}</v-col>
  123.               </v-row>
  124.             </v-fade-transition>
  125.           </v-col>
  126.         </v-row>
  127.       </v-expansion-panel-header>
  128.       <v-expansion-panel-content>
  129.         <v-row
  130.           justify="space-around"
  131.           no-gutters
  132.         >
  133.           <v-col cols="3">
  134.             <v-menu
  135.               ref="startMenu"
  136.               :close-on-content-click="false"
  137.               :return-value.sync="trip.start"
  138.               offset-y
  139.               min-width="290px"
  140.             >
  141.               <template v-slot:activator="{ on }">
  142.                 <v-text-field
  143.                   v-model="trip.start"
  144.                   label="Start date"
  145.                   prepend-icon="event"
  146.                   readonly
  147.                   v-on="on"
  148.                 ></v-text-field>
  149.               </template>
  150.               <v-date-picker
  151.                 v-model="date"
  152.                 no-title
  153.                 scrollable
  154.               >
  155.                 <v-spacer></v-spacer>
  156.                 <v-btn
  157.                   text
  158.                   color="primary"
  159.                   @click="$refs.startMenu.isActive = false"
  160.                 >Cancel</v-btn>
  161.                 <v-btn
  162.                   text
  163.                   color="primary"
  164.                   @click="$refs.startMenu.save(date)"
  165.                 >OK</v-btn>
  166.               </v-date-picker>
  167.             </v-menu>
  168.           </v-col>
  170.           <v-col cols="3">
  171.             <v-menu
  172.               ref="endMenu"
  173.               :close-on-content-click="false"
  174.               :return-value.sync="trip.end"
  175.               offset-y
  176.               min-width="290px"
  177.             >
  178.               <template v-slot:activator="{ on }">
  179.                 <v-text-field
  180.                   v-model="trip.end"
  181.                   label="End date"
  182.                   prepend-icon="event"
  183.                   readonly
  184.                   v-on="on"
  185.                 ></v-text-field>
  186.               </template>
  187.               <v-date-picker
  188.                 v-model="date"
  189.                 no-title
  190.                 scrollable
  191.               >
  192.                 <v-spacer></v-spacer>
  193.                 <v-btn
  194.                   text
  195.                   color="primary"
  196.                   @click="$refs.endMenu.isActive = false"
  197.                 >
  198.                   Cancel
  199.                 </v-btn>
  200.                 <v-btn
  201.                   text
  202.                   color="primary"
  203.                   @click="$refs.endMenu.save(date)"
  204.                 >
  205.                   OK
  206.                 </v-btn>
  207.               </v-date-picker>
  208.             </v-menu>
  209.           </v-col>
  210.         </v-row>
  211.       </v-expansion-panel-content>
  212.     </v-expansion-panel>
  213.   </v-expansion-panels>
  214. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       date: null,
  5.       trip: {
  6.         name: '',
  7.         location: null,
  8.         start: null,
  9.         end: null,
  10.       },
  11.       locations: ['Australia', 'Barbados', 'Chile', 'Denmark', 'Equador', 'France'],
  12.     }),
  13.   }
  14. </script>

Expansion panels（扩展面板） - 图12