对话框

v-dialog 组件通知用户有关特定任务，且可能包含关键信息、需要决策或涉及多个任务。减少使用对话框的频率，因为它们具有干扰性。

用例

对话框包含两个插槽，一个用于其激活器，另一个用于其内容（默认）。对隐私政策有好处。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-dialog
  4.       v-model="dialog"
  5.       width="500"
  6.     >
  7.       <template v-slot:activator="{ on }">
  8.         <v-btn
  9.           color="red lighten-2"
  10.           dark
  11.           v-on="on"
  12.         >
  13.           Click Me
  14.         </v-btn>
  15.       </template>
  17.       <v-card>
  18.         <v-card-title
  19.           class="headline grey lighten-2"
  20.           primary-title
  21.         >
  22.           Privacy Policy
  23.         </v-card-title>
  25.         <v-card-text>
  26.           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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  27.         </v-card-text>
  29.         <v-divider></v-divider>
  31.         <v-card-actions>
  32.           <v-spacer></v-spacer>
  33.           <v-btn
  34.             color="primary"
  35.             text
  36.             @click="dialog = false"
  37.           >
  38.             I accept
  39.           </v-btn>
  40.         </v-card-actions>
  41.       </v-card>
  42.     </v-dialog>
  43.   </div>
  44. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialog: false,
  6.       }
  7.     },
  8.   }
  9. </script>

Dialogs（对话框） - 图1

API

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

Dialogs（对话框） - 图2

示例

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

没有激活器

如果因为某些原因而不能使用 activator slot （激活器插槽），请确保将.stop 修饰符添加到触发对话框的事件。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-btn
  4.       color="primary"
  5.       dark
  6.       @click.stop="dialog = true"
  7.     >
  8.       Open Dialog
  9.     </v-btn>
  11.     <v-dialog
  12.       v-model="dialog"
  13.       max-width="290"
  14.     >
  15.       <v-card>
  16.         <v-card-title class="headline">Use Google's location service?</v-card-title>
  18.         <v-card-text>
  19.           Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
  20.         </v-card-text>
  22.         <v-card-actions>
  23.           <v-spacer></v-spacer>
  25.           <v-btn
  26.             color="green darken-1"
  27.             text
  28.             @click="dialog = false"
  29.           >
  30.             Disagree
  31.           </v-btn>
  33.           <v-btn
  34.             color="green darken-1"
  35.             text
  36.             @click="dialog = false"
  37.           >
  38.             Agree
  39.           </v-btn>
  40.         </v-card-actions>
  41.       </v-card>
  42.     </v-dialog>
  43.   </v-row>
  44. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialog: false,
  6.       }
  7.     },
  8.   }
  9. </script>

Dialogs（对话框） - 图3

模态框

与 Simple Dialog 类似，不同之处在于在触摸外部时不会将其关闭。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-dialog v-model="dialog" persistent max-width="290">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
  6.       </template>
  7.       <v-card>
  8.         <v-card-title class="headline">Use Google's location service?</v-card-title>
  9.         <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
  10.         <v-card-actions>
  11.           <v-spacer></v-spacer>
  12.           <v-btn color="green darken-1" text @click="dialog = false">Disagree</v-btn>
  13.           <v-btn color="green darken-1" text @click="dialog = false">Agree</v-btn>
  14.         </v-card-actions>
  15.       </v-card>
  16.     </v-dialog>
  17.   </v-row>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialog: false,
  6.       }
  7.     },
  8.   }
  9. </script>

Dialogs（对话框） - 图4

可滚动

一个可滚动内容的对话框示例。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-dialog v-model="dialog" scrollable max-width="300px">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
  6.       </template>
  7.       <v-card>
  8.         <v-card-title>Select Country</v-card-title>
  9.         <v-divider></v-divider>
  10.         <v-card-text style="height: 300px;">
  11.           <v-radio-group v-model="dialogm1" column>
  12.             <v-radio label="Bahamas, The" value="bahamas"></v-radio>
  13.             <v-radio label="Bahrain" value="bahrain"></v-radio>
  14.             <v-radio label="Bangladesh" value="bangladesh"></v-radio>
  15.             <v-radio label="Barbados" value="barbados"></v-radio>
  16.             <v-radio label="Belarus" value="belarus"></v-radio>
  17.             <v-radio label="Belgium" value="belgium"></v-radio>
  18.             <v-radio label="Belize" value="belize"></v-radio>
  19.             <v-radio label="Benin" value="benin"></v-radio>
  20.             <v-radio label="Bhutan" value="bhutan"></v-radio>
  21.             <v-radio label="Bolivia" value="bolivia"></v-radio>
  22.             <v-radio label="Bosnia and Herzegovina" value="bosnia"></v-radio>
  23.             <v-radio label="Botswana" value="botswana"></v-radio>
  24.             <v-radio label="Brazil" value="brazil"></v-radio>
  25.             <v-radio label="Brunei" value="brunei"></v-radio>
  26.             <v-radio label="Bulgaria" value="bulgaria"></v-radio>
  27.             <v-radio label="Burkina Faso" value="burkina"></v-radio>
  28.             <v-radio label="Burma" value="burma"></v-radio>
  29.             <v-radio label="Burundi" value="burundi"></v-radio>
  30.           </v-radio-group>
  31.         </v-card-text>
  32.         <v-divider></v-divider>
  33.         <v-card-actions>
  34.           <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
  35.           <v-btn color="blue darken-1" text @click="dialog = false">Save</v-btn>
  36.         </v-card-actions>
  37.       </v-card>
  38.     </v-dialog>
  39.   </v-row>
  40. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialogm1: '',
  6.         dialog: false,
  7.       }
  8.     },
  9.   }
  10. </script>

Dialogs（对话框） - 图5

溢出

如果内容溢出有效窗口空间，将会滚动容器。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-dialog v-model="dialog" width="600px">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
  6.       </template>
  7.       <v-card>
  8.         <v-card-title>
  9.           <span class="headline">Use Google's location service?</span>
  10.         </v-card-title>
  11.         <v-card-text>Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in, duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis lectus luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent, elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.
  12.           Justo ex quisque nulla accusamus venenatis, sed quis. Nibh phasellus gravida metus in, fusce aenean ut erat commodo eros. Ut turpis, dui integer, nonummy pede placeat nec in sit leo. Faucibus porttitor illo taciti odio, amet viverra scelerisque quis quis et tortor, curabitur morbi a. Enim tempor at, rutrum elit condimentum, amet rutrum vitae tempor torquent nunc. Praesent vestibulum integer maxime felis. Neque aenean quia vitae nostra, tempus elit enim id dui, at egestas pulvinar. Integer libero vestibulum, quis blandit scelerisque mattis fermentum nulla, tortor donec vestibulum dolor amet eget, elit nullam. Aliquam leo phasellus aliquam curabitur metus a, nulla justo mattis duis interdum vel, mollis vitae et id, vestibulum erat ridiculus sit pulvinar justo sed. Vehicula convallis, et nulla wisi, amet vestibulum risus, quam ac egestas.
  13.           Et vitae, nulla gravida erat scelerisque nullam nunc pellentesque, a dictumst cras augue, purus imperdiet non. Varius montes cursus varius vel tortor, nec leo a qui, magni cras, velit vel consectetuer lobortis vel. Nibh erat et wisi felis leo porttitor, sapien nibh sapien pede mi, sed eget porttitor, repellendus arcu ac quis. Luctus vulputate aut est sem magna, placerat accumsan nunc vestibulum ipsum ac auctor, maecenas lorem in ut nec mauris tortor, doloribus varius sem tortor vestibulum mollis, eleifend tortor felis tempus lacus eu eu. Eleifend vel eu, nullam maecenas mauris nec nunc euismod, tortor porta ridiculus potenti, massa tristique nam magna, et wisi placerat et erat ante. Eget pede erat in facilisis, fermentum venenatis sodales. Ac tortor sociis et non animi tristique, rhoncus malesuada, ut arcu volutpat scelerisque sollicitudin, elit curabitur dui pede purus dolor, integer aenean risus taciti nulla eleifend accumsan. At pulvinar diam parturient, interdum mi velit aliquet et a. Arcu at ac placerat eget justo semper, purus sociis curabitur mi ipsum consequat ut, mollis vestibulum, est ante ornare lacus sem. Neque magna mauris, commodo quisque, praesent semper suscipit lobortis nam. Justo malesuada cursus ac nunc litora nunc. Tellus ac, in lobortis nunc, montes lectus purus fermentum.
  14.           Ac sit wisi. Sodales aliquam, sed vestibulum nullam arcu sit risus arcu, id luctus vitae lorem nibh, integer nec nullam class cursus mi, purus arcu lectus. Vel ante suscipit volutpat potenti mattis sed, wisi eu placerat aliquam erat, lectus morbi lobortis at assumenda. Consequat neque purus ipsum voluptas odio, netus vestibulum ut nec, suspendisse pellentesque nec enim in. Wisi dictum sed semper a, ipsum erat tellus habitasse est, erat sem ornare, vitae quisque ultricies. Dui sed blandit. Tempor et faucibus justo sed luctus, nec vitae vitae. Nunc nibh pede, ipsum vestibulum aenean leo ante ultricies, nam cras quis sed penatibus amet. In mauris a. Integer metus mauris tortor, et rutrum vestibulum ultricies, ut phasellus in ullamcorper ut mollit, eu justo. Cursus pretium venenatis.
  15.           Cras pellentesque vel sodales accumsan aenean. Feugiat metus sit nec in aliquet amet, porttitor pretium vulputate massa. Consequat ipsum luctus quisque adipiscing libero. Wisi sollicitudin. Eget vitae ac lobortis, lorem natoque vestibulum et, aliquet faucibus at morbi nibh, vel condimentum. Massa unde orci sed id sed, odio donec congue nec praesent amet. Hymenaeos velit lacus, quis vivamus libero tempus duis, eu nisi eu, ipsum at accumsan pede justo morbi donec, massa et libero sit risus neque tortor. Ut sed sed etiam hendrerit dapibus, quis metus suspendisse nibh.
  16.           Fringilla tempor felis augue magna. Cum arcu a, id vitae. Pellentesque pharetra in cras sociis adipiscing est. Nibh nec mattis at maecenas, nisl orci aliquam nulla justo egestas venenatis, elementum duis vel porta eros, massa vitae, eligendi imperdiet amet. Nec neque luctus suscipit, justo sem praesent, ut nisl quisque, volutpat torquent wisi tellus aliquam reprehenderit, curabitur cras at quis massa porttitor mauris. Eros sed ultrices. Amet dignissim justo urna feugiat mauris litora, etiam accumsan, lobortis a orci suspendisse. Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper auctor, saepe sem integer quam, at feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis mauris est in ipsum, nulla amet non justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum. Nibh id auctor, ab nulla vivamus ultrices, posuere morbi nunc tellus gravida vivamus.
  17.           Mauris nec, facilisi quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi faucibus tempor et odio leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat luctus quam penatibus fringilla dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed blandit id sed. Tellus integer, dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus ut. Nullam hymenaeos. Curabitur in a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus nonummy hendrerit wisi, etiam ut.
  18.           Semper praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per mi sed sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante congue elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum sollicitudin, lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem ac. Amet tellus molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi lobortis ac velit, montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam, cursus nulla enim orci, nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum sed tellus purus et. Duis molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante ultricies orci lacus, libero consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui, aliquam et et amet nostra ligula.
  19.           Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean elit, id sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem cum non lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula tempus. Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit orci nec nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa sed, etiam sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi imperdiet. Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa vivamus, rutrum elit, ultricies metus volutpat.
  20.           Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan nunc pede tempus mi ipsum, ligula sed. Non condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis massa ut dolor ante, tempus lacinia arcu. Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac vivamus. Nam libero orci, pulvinar nulla, enim pellentesque consectetuer leo, feugiat rhoncus rhoncus vel. Magna sociosqu donec, dictum cursus ullamcorper viverra. Ultricies quis orci lorem, suspendisse ut vestibulum integer, purus sed lorem pulvinar habitasse turpis.
  21.           +</v-card-text>
  22.         <v-card-actions>
  23.           <v-spacer></v-spacer>
  24.           <v-btn color="green darken-1" text @click="dialog = false">Disagree</v-btn>
  25.           <v-btn color="green darken-1" text @click="dialog = false">Agree</v-btn>
  26.         </v-card-actions>
  27.       </v-card>
  28.     </v-dialog>
  29.   </v-row>
  30. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialog: false,
  6.       }
  7.     },
  8.   }
  9. </script>

Dialogs（对话框） - 图6

Photography

The Photography Theme is a clean and responsive premium Vuetify template. It includes 6 pre-built pages with beautifully crafted components and a simple interface.

ads by Vuetify

](https://store.vuetifyjs.com/product/photography-theme/?ref=vuetifyjs.com)

表单对话框

这里有一个简单的表单对话框的例子。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-dialog v-model="dialog" persistent max-width="600px">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
  6.       </template>
  7.       <v-card>
  8.         <v-card-title>
  9.           <span class="headline">User Profile</span>
  10.         </v-card-title>
  11.         <v-card-text>
  12.           <v-container>
  13.             <v-row>
  14.               <v-col cols="12" sm="6" md="4">
  15.                 <v-text-field label="Legal first name*" required></v-text-field>
  16.               </v-col>
  17.               <v-col cols="12" sm="6" md="4">
  18.                 <v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
  19.               </v-col>
  20.               <v-col cols="12" sm="6" md="4">
  21.                 <v-text-field
  22.                   label="Legal last name*"
  23.                   hint="example of persistent helper text"
  24.                   persistent-hint
  25.                   required
  26.                 ></v-text-field>
  27.               </v-col>
  28.               <v-col cols="12">
  29.                 <v-text-field label="Email*" required></v-text-field>
  30.               </v-col>
  31.               <v-col cols="12">
  32.                 <v-text-field label="Password*" type="password" required></v-text-field>
  33.               </v-col>
  34.               <v-col cols="12" sm="6">
  35.                 <v-select
  36.                   :items="['0-17', '18-29', '30-54', '54+']"
  37.                   label="Age*"
  38.                   required
  39.                 ></v-select>
  40.               </v-col>
  41.               <v-col cols="12" sm="6">
  42.                 <v-autocomplete
  43.                   :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
  44.                   label="Interests"
  45.                   multiple
  46.                 ></v-autocomplete>
  47.               </v-col>
  48.             </v-row>
  49.           </v-container>
  50.           <small>*indicates required field</small>
  51.         </v-card-text>
  52.         <v-card-actions>
  53.           <v-spacer></v-spacer>
  54.           <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
  55.           <v-btn color="blue darken-1" text @click="dialog = false">Save</v-btn>
  56.         </v-card-actions>
  57.       </v-card>
  58.     </v-dialog>
  59.   </v-row>
  60. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       dialog: false,
  5.     }),
  6.   }
  7. </script>

Dialogs（对话框） - 图7

加载器

v-dialog 组件可以轻松地为您的应用程序创建自定义加载体验。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn
  4.       :disabled="dialog"
  5.       :loading="dialog"
  6.       class="white--text"
  7.       color="purple darken-2"
  8.       @click="dialog = true"
  9.     >
  10.       Start loading
  11.     </v-btn>
  12.     <v-dialog
  13.       v-model="dialog"
  14.       hide-overlay
  15.       persistent
  16.       width="300"
  17.     >
  18.       <v-card
  19.         color="primary"
  20.         dark
  21.       >
  22.         <v-card-text>
  23.           Please stand by
  24.           <v-progress-linear
  25.             indeterminate
  26.             color="white"
  27.             class="mb-0"
  28.           ></v-progress-linear>
  29.         </v-card-text>
  30.       </v-card>
  31.     </v-dialog>
  32.   </div>
  33. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialog: false,
  6.       }
  7.     },
  9.     watch: {
  10.       dialog (val) {
  11.         if (!val) return
  13.         setTimeout(() => (this.dialog = false), 4000)
  14.       },
  15.     },
  16.   }
  17. </script>

Dialogs（对话框） - 图8

全屏对话框

由于空间的限制，全屏对话框可能更适用于移动设备，相对大屏设备来说。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
  6.       </template>
  7.       <v-card>
  8.         <v-toolbar dark color="primary">
  9.           <v-btn icon dark @click="dialog = false">
  10.             <v-icon>mdi-close</v-icon>
  11.           </v-btn>
  12.           <v-toolbar-title>Settings</v-toolbar-title>
  13.           <v-spacer></v-spacer>
  14.           <v-toolbar-items>
  15.             <v-btn dark text @click="dialog = false">Save</v-btn>
  16.           </v-toolbar-items>
  17.         </v-toolbar>
  18.         <v-list three-line subheader>
  19.           <v-subheader>User Controls</v-subheader>
  20.           <v-list-item>
  21.             <v-list-item-content>
  22.               <v-list-item-title>Content filtering</v-list-item-title>
  23.               <v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
  24.             </v-list-item-content>
  25.           </v-list-item>
  26.           <v-list-item>
  27.             <v-list-item-content>
  28.               <v-list-item-title>Password</v-list-item-title>
  29.               <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
  30.             </v-list-item-content>
  31.           </v-list-item>
  32.         </v-list>
  33.         <v-divider></v-divider>
  34.         <v-list three-line subheader>
  35.           <v-subheader>General</v-subheader>
  36.           <v-list-item>
  37.             <v-list-item-action>
  38.               <v-checkbox v-model="notifications"></v-checkbox>
  39.             </v-list-item-action>
  40.             <v-list-item-content>
  41.               <v-list-item-title>Notifications</v-list-item-title>
  42.               <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
  43.             </v-list-item-content>
  44.           </v-list-item>
  45.           <v-list-item>
  46.             <v-list-item-action>
  47.               <v-checkbox v-model="sound"></v-checkbox>
  48.             </v-list-item-action>
  49.             <v-list-item-content>
  50.               <v-list-item-title>Sound</v-list-item-title>
  51.               <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
  52.             </v-list-item-content>
  53.           </v-list-item>
  54.           <v-list-item>
  55.             <v-list-item-action>
  56.               <v-checkbox v-model="widgets"></v-checkbox>
  57.             </v-list-item-action>
  58.             <v-list-item-content>
  59.               <v-list-item-title>Auto-add widgets</v-list-item-title>
  60.               <v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
  61.             </v-list-item-content>
  62.           </v-list-item>
  63.         </v-list>
  64.       </v-card>
  65.     </v-dialog>
  66.   </v-row>
  67. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialog: false,
  6.         notifications: false,
  7.         sound: true,
  8.         widgets: false,
  9.       }
  10.     },
  11.   }
  12. </script>

Dialogs（对话框） - 图9

嵌套对话框

对话框可以嵌套：可以从一个对话框打开另一个对话框。

template script

  1. <template>
  2.   <div>
  3.     <v-row
  4.       justify="center"
  5.     >
  6.       <v-btn
  7.         color="primary"
  8.         class="ma-2"
  9.         dark
  10.         @click="dialog = true"
  11.       >
  12.         Open Dialog 1
  13.       </v-btn>
  14.       <v-btn
  15.         color="primary"
  16.         class="ma-2"
  17.         dark
  18.         @click="dialog2 = true"
  19.       >
  20.         Open Dialog 2
  21.       </v-btn>
  22.       <v-btn
  23.         color="primary"
  24.         class="ma-2"
  25.         dark
  26.         @click="dialog3 = true"
  27.       >
  28.         Open Dialog 3
  29.       </v-btn>
  30.       <v-menu
  31.         bottom
  32.         offset-y
  33.       >
  34.         <template v-slot:activator="{ on }">
  35.           <v-btn
  36.             class="ma-2"
  37.             v-on="on"
  38.           >A Menu</v-btn>
  39.         </template>
  40.         <v-list>
  41.           <v-list-item
  42.             v-for="(item, i) in items"
  43.             :key="i"
  44.             @click="() => {}"
  45.           >
  46.             <v-list-item-title>{{ item.title }}</v-list-item-title>
  47.           </v-list-item>
  48.         </v-list>
  49.       </v-menu>
  50.       <v-dialog
  51.         v-model="dialog"
  52.         fullscreen
  53.         hide-overlay
  54.         transition="dialog-bottom-transition"
  55.         scrollable
  56.       >
  57.         <v-card tile>
  58.           <v-toolbar
  59.             flat
  60.             dark
  61.             color="primary"
  62.           >
  63.             <v-btn
  64.               icon
  65.               dark
  66.               @click="dialog = false"
  67.             >
  68.               <v-icon>mdi-close</v-icon>
  69.             </v-btn>
  70.             <v-toolbar-title>Settings</v-toolbar-title>
  71.             <v-spacer></v-spacer>
  72.             <v-toolbar-items>
  73.               <v-btn
  74.                 dark
  75.                 text
  76.                 @click="dialog = false"
  77.               >
  78.                 Save
  79.               </v-btn>
  80.             </v-toolbar-items>
  81.             <v-menu
  82.               bottom
  83.               right
  84.               offset-y
  85.             >
  86.               <template v-slot:activator="{ on }">
  87.                 <v-btn
  88.                   dark
  89.                   icon
  90.                   v-on="on"
  91.                 >
  92.                   <v-icon>mdi-dots-vertical</v-icon>
  93.                 </v-btn>
  94.               </template>
  95.               <v-list>
  96.                 <v-list-item
  97.                   v-for="(item, i) in items"
  98.                   :key="i"
  99.                   @click="() => {}"
  100.                 >
  101.                   <v-list-item-title>{{ item.title }}</v-list-item-title>
  102.                 </v-list-item>
  103.               </v-list>
  104.             </v-menu>
  105.           </v-toolbar>
  106.           <v-card-text>
  107.             <v-btn
  108.               color="primary"
  109.               dark
  110.               class="ma-2"
  111.               @click="dialog2 = !dialog2"
  112.             >
  113.               Open Dialog 2
  114.             </v-btn>
  115.             <v-tooltip right>
  116.               <template v-slot:activator="{ on }">
  117.                 <v-btn
  118.                   class="ma-2"
  119.                   v-on="on"
  120.                 >Tool Tip Activator</v-btn>
  121.               </template>
  122.               Tool Tip
  123.             </v-tooltip>
  124.             <v-list
  125.               three-line
  126.               subheader
  127.             >
  128.               <v-subheader>User Controls</v-subheader>
  129.               <v-list-item>
  130.                 <v-list-item-content>
  131.                   <v-list-item-title>Content filtering</v-list-item-title>
  132.                   <v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
  133.                 </v-list-item-content>
  134.               </v-list-item>
  135.               <v-list-item>
  136.                 <v-list-item-content>
  137.                   <v-list-item-title>Password</v-list-item-title>
  138.                   <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
  139.                 </v-list-item-content>
  140.               </v-list-item>
  141.             </v-list>
  142.             <v-divider></v-divider>
  143.             <v-list
  144.               three-line
  145.               subheader
  146.             >
  147.               <v-subheader>General</v-subheader>
  148.               <v-list-item>
  149.                 <v-list-item-action>
  150.                   <v-checkbox v-model="notifications"></v-checkbox>
  151.                 </v-list-item-action>
  152.                 <v-list-item-content>
  153.                   <v-list-item-title>Notifications</v-list-item-title>
  154.                   <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
  155.                 </v-list-item-content>
  156.               </v-list-item>
  157.               <v-list-item>
  158.                 <v-list-item-action>
  159.                   <v-checkbox v-model="sound"></v-checkbox>
  160.                 </v-list-item-action>
  161.                 <v-list-item-content>
  162.                   <v-list-item-title>Sound</v-list-item-title>
  163.                   <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
  164.                 </v-list-item-content>
  165.               </v-list-item>
  166.               <v-list-item>
  167.                 <v-list-item-action>
  168.                   <v-checkbox v-model="widgets"></v-checkbox>
  169.                 </v-list-item-action>
  170.                 <v-list-item-content>
  171.                   <v-list-item-title>Auto-add widgets</v-list-item-title>
  172.                   <v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
  173.                 </v-list-item-content>
  174.               </v-list-item>
  175.             </v-list>
  176.           </v-card-text>
  178.           <div style="flex: 1 1 auto;"></div>
  179.         </v-card>
  180.       </v-dialog>
  182.       <v-dialog
  183.         v-model="dialog2"
  184.         max-width="500px"
  185.       >
  186.         <v-card>
  187.           <v-card-title>
  188.             Dialog 2
  189.           </v-card-title>
  190.           <v-card-text>
  191.             <v-btn
  192.               color="primary"
  193.               dark
  194.               @click="dialog3 = !dialog3"
  195.             >
  196.               Open Dialog 3
  197.             </v-btn>
  198.             <v-select
  199.               :items="select"
  200.               label="A Select List"
  201.               item-value="text"
  202.             ></v-select>
  203.           </v-card-text>
  204.           <v-card-actions>
  205.             <v-btn
  206.               color="primary"
  207.               text
  208.               @click="dialog2 = false"
  209.             >
  210.               Close
  211.             </v-btn>
  212.           </v-card-actions>
  213.         </v-card>
  214.       </v-dialog>
  215.       <v-dialog
  216.         v-model="dialog3"
  217.         max-width="500px"
  218.       >
  219.         <v-card>
  220.           <v-card-title>
  221.             <span>Dialog 3</span>
  222.             <v-spacer></v-spacer>
  223.             <v-menu
  224.               bottom
  225.               left
  226.             >
  227.               <template v-slot:activator="{ on }">
  228.                 <v-btn
  229.                   icon
  230.                   v-on="on"
  231.                 >
  232.                   <v-icon>mdi-dots-vertical</v-icon>
  233.                 </v-btn>
  234.               </template>
  235.               <v-list>
  236.                 <v-list-item
  237.                   v-for="(item, i) in items"
  238.                   :key="i"
  239.                   @click="() => {}"
  240.                 >
  241.                   <v-list-item-title>{{ item.title }}</v-list-item-title>
  242.                 </v-list-item>
  243.               </v-list>
  244.             </v-menu>
  245.           </v-card-title>
  246.           <v-card-actions>
  247.             <v-btn
  248.               color="primary"
  249.               text
  250.               @click="dialog3 = false"
  251.             >
  252.               Close
  253.             </v-btn>
  254.           </v-card-actions>
  255.         </v-card>
  256.       </v-dialog>
  257.     </v-row>
  258.   </div>
  259. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialog: false,
  6.         dialog2: false,
  7.         dialog3: false,
  8.         notifications: false,
  9.         sound: true,
  10.         widgets: false,
  11.         items: [
  12.           {
  13.             title: 'Click Me',
  14.           },
  15.           {
  16.             title: 'Click Me',
  17.           },
  18.           {
  19.             title: 'Click Me',
  20.           },
  21.           {
  22.             title: 'Click Me 2',
  23.           },
  24.         ],
  25.         select: [
  26.           { text: 'State 1' },
  27.           { text: 'State 2' },
  28.           { text: 'State 3' },
  29.           { text: 'State 4' },
  30.           { text: 'State 5' },
  31.           { text: 'State 6' },
  32.           { text: 'State 7' },
  33.         ],
  34.       }
  35.     },
  36.   }
  37. </script>

Dialogs（对话框） - 图10