底部表单

底部表单是一个修改后的v-dialog，可以从屏幕底部滑动，类似于一个v-bottom-navigation。底部导航组件用于按钮和特定应用程序级别操作，而底部表单可以包含任何内容。

用例

在这里，我们将显示一个示例操作列表，它可能出现在应用程序中。

Bottom sheets（底部表单） - 图1

API

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

Bottom sheets（底部表单） - 图2

示例

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

持久的

持久的底部表单无法通过在外部单击来关闭。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-bottom-sheet v-model="sheet" persistent>
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           color="green"
  7.           dark
  8.           v-on="on"
  9.         >
  10.           Open Persistent
  11.         </v-btn>
  12.       </template>
  13.       <v-sheet class="text-center" height="200px">
  14.         <v-btn
  15.           class="mt-6"
  16.           flat
  17.           color="error"
  18.           @click="sheet = !sheet"
  19.         >close</v-btn>
  20.         <div class="py-3">This is a bottom sheet using the persistent prop</div>
  21.       </v-sheet>
  22.     </v-bottom-sheet>
  23.   </div>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       sheet: false,
  5.     }),
  6.   }
  7. </script>

Bottom sheets（底部表单） - 图3

v-model 控制

底部表单可以使用 v-model 来控制。如果你不能使用 activator 插槽，那么可以用它来控制开关。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn
  4.       color="blue"
  5.       dark
  6.       @click="sheet = !sheet"
  7.     >
  8.       Open v-model
  9.     </v-btn>
  10.     <v-bottom-sheet v-model="sheet">
  11.       <v-sheet class="text-center" height="200px">
  12.         <v-btn
  13.           class="mt-6"
  14.           text
  15.           color="red"
  16.           @click="sheet = !sheet"
  17.         >close</v-btn>
  18.         <div class="py-3">This is a bottom sheet using the controlled by v-model instead of activator</div>
  19.       </v-sheet>
  20.     </v-bottom-sheet>
  21.   </div>
  22. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       sheet: false,
  5.       tiles: [
  6.         { img: 'keep.png', title: 'Keep' },
  7.         { img: 'inbox.png', title: 'Inbox' },
  8.         { img: 'hangouts.png', title: 'Hangouts' },
  9.         { img: 'messenger.png', title: 'Messenger' },
  10.         { img: 'google.png', title: 'Google+' },
  11.       ],
  12.     }),
  13.   }
  14. </script>

Bottom sheets（底部表单） - 图4

嵌入

底部表单可以嵌入，将其在桌面上的最大宽度减小到 70％。可以使用 width 属性手动减少。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-bottom-sheet v-model="sheet" inset>
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           color="orange"
  7.           dark
  8.           v-on="on"
  9.         >
  10.           Open Inset
  11.         </v-btn>
  12.       </template>
  13.       <v-sheet class="text-center" height="200px">
  14.         <v-btn
  15.           class="mt-6"
  16.           text
  17.           color="error"
  18.           @click="sheet = !sheet"
  19.         >close</v-btn>
  20.         <div class="my-3">This is a bottom sheet using the inset prop</div>
  21.       </v-sheet>
  22.     </v-bottom-sheet>
  23.   </div>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       sheet: false,
  5.     }),
  6.   }
  7. </script>

Bottom sheets（底部表单） - 图5

Vue School

Learn Vue.js and modern and cutting-edge front-end technologies with our premium tutorials and video courses.

ads by Vuetify

](https://vueschool.io/?ref=vuetifyjs.com&friend=vuetify)

音乐播放器

使用嵌入式底部表单，您可以制作实用的组件，例如这个简单的音乐播放器。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-bottom-sheet inset>
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           color="red"
  7.           dark
  8.           v-on="on"
  9.         >
  10.           Open Player
  11.         </v-btn>
  12.       </template>
  13.       <v-card tile>
  14.         <v-progress-linear
  15.           :value="50"
  16.           class="my-0"
  17.           height="3"
  18.         ></v-progress-linear>
  20.         <v-list>
  21.           <v-list-item>
  22.             <v-list-item-content>
  23.               <v-list-item-title>The Walker</v-list-item-title>
  24.               <v-list-item-subtitle>Fitz & The Trantrums</v-list-item-subtitle>
  25.             </v-list-item-content>
  27.             <v-spacer></v-spacer>
  29.             <v-list-item-icon>
  30.               <v-btn icon>
  31.                 <v-icon>mdi-rewind</v-icon>
  32.               </v-btn>
  33.             </v-list-item-icon>
  35.             <v-list-item-icon :class="{ 'mx-5': $vuetify.breakpoint.mdAndUp }">
  36.               <v-btn icon>
  37.                 <v-icon>mdi-pause</v-icon>
  38.               </v-btn>
  39.             </v-list-item-icon>
  41.             <v-list-item-icon
  42.               class="ml-0"
  43.               :class="{ 'mr-3': $vuetify.breakpoint.mdAndUp }"
  44.             >
  45.               <v-btn icon>
  46.                 <v-icon>mdi-fast-forward</v-icon>
  47.               </v-btn>
  48.             </v-list-item-icon>
  49.           </v-list-item>
  50.         </v-list>
  51.       </v-card>
  52.     </v-bottom-sheet>
  53.   </div>
  54. </template>

Bottom sheets（底部表单） - 图6

打开列表

通过将功能列表合并到底部表单中，您可以创建一个简单的 ‘open in’ 组件。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-bottom-sheet v-model="sheet">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           color="purple"
  7.           dark
  8.           v-on="on"
  9.         >
  10.           Open In
  11.         </v-btn>
  12.       </template>
  13.       <v-list>
  14.         <v-subheader>Open in</v-subheader>
  15.         <v-list-item
  16.           v-for="tile in tiles"
  17.           :key="tile.title"
  18.           @click="sheet = false"
  19.         >
  20.           <v-list-item-avatar>
  21.             <v-avatar size="32px" tile>
  22.               <img
  23.                 :src="`https://cdn.vuetifyjs.com/images/bottom-sheets/${tile.img}`"
  24.                 :alt="tile.title"
  25.               >
  26.             </v-avatar>
  27.           </v-list-item-avatar>
  28.           <v-list-item-title>{{ tile.title }}</v-list-item-title>
  29.         </v-list-item>
  30.       </v-list>
  31.     </v-bottom-sheet>
  32.   </div>
  33. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       sheet: false,
  5.       tiles: [
  6.         { img: 'keep.png', title: 'Keep' },
  7.         { img: 'inbox.png', title: 'Inbox' },
  8.         { img: 'hangouts.png', title: 'Hangouts' },
  9.         { img: 'messenger.png', title: 'Messenger' },
  10.         { img: 'google.png', title: 'Google+' },
  11.       ],
  12.     }),
  13.   }
  14. </script>

Bottom sheets（底部表单） - 图7