一. 对话框
v-dialog 组件通知用户特定的任务,可能包含关键信息、需要决策或涉及多个任务。 请尽量少用对话框,因为它们会中断(流程)。
1. 对话框
对话框包含两个插槽,一个用于它的激活器,另一个用于它的内容(默认)。
- <template>
- <v-container grid-list-xs>
- <v-dialog
- v-model="dialog_show"
- max-width="500px"
- transition="dialog-transition"
- >
- <template v-slot:activator="{ on, attrs }">
- <v-btn color="red lighten-2" dark v-bind="attrs" v-on="on">
- Click Me
- </v-btn>
- </template>
- <v-card>
- <v-card-title class="text-h5 grey lighten-2"> 欢迎您 </v-card-title>
- <v-card-text class="mt-4">
- The literal Latin meaning of the Illuminati means "people who have
- received special revelation." Naturally, there are many unrelated
- groups in history who call themselves Illuminati. Usually, they claim
- to possess Gnostic texts or other similar mysterious information.
- </v-card-text>
- <v-divider></v-divider>
- <v-card-actions>
- <v-spacer></v-spacer>
- <v-btn color="primary" text @click="dialog_show = false">
- 好的
- </v-btn>
- </v-card-actions>
- </v-card>
- </v-dialog>
- </v-container>
- </template>
-
- <script>
- export default {
- data() {
- return {
- dialog_show: false,
- };
- },
- };
- </script>

2. 全屏对话框 fullscreen
- <v-container grid-list-xs>
- <v-dialog
- v-model="dialog_show"
- fullscreen
- transition="dialog-transition"
- >
- <template v-slot:activator="{ on, attrs }">
- <v-btn color="red lighten-2" dark v-bind="attrs" v-on="on">
- Click Me
- </v-btn>
- </template>
- <v-card>
- <v-toolbar dark color="primary">
- <v-app-bar-nav-icon></v-app-bar-nav-icon>
- <v-spacer></v-spacer>
- <v-btn text @click="dialog_show = false">OK</v-btn>
- </v-toolbar>
- <v-card-title> 欢迎您 </v-card-title>
- <v-card-text class="mt-4">
- The literal Latin meaning of the Illuminati means "people who have
- received special revelation." Naturally, there are many unrelated
- groups in history who call themselves Illuminati. Usually, they claim
- to possess Gnostic texts or other similar mysterious information.
- </v-card-text>
- <v-img class="mx-4" src="~assets/gmh.jpg"></v-img>
- </v-card>
- </v-dialog>
- </v-container>

3. 弹出方向 transition
(1). 顶部弹出
- <v-dialog
- v-model="dialog_show"
- fullscreen
- transition="dialog-top-transition"
- >
