当前位置:   article > 正文

Material Design风格神框架vuetify 学习笔记(十) 基础组件6 对话框 响应式长宽比 徽标 横幅...

vuetify学习笔记

一. 对话框

v-dialog 组件通知用户特定的任务,可能包含关键信息、需要决策或涉及多个任务。 请尽量少用对话框,因为它们会中断(流程)。

1. 对话框

对话框包含两个插槽,一个用于它的激活器,另一个用于它的内容(默认)。

  1. <template>
  2. <v-container grid-list-xs>
  3. <v-dialog
  4. v-model="dialog_show"
  5. max-width="500px"
  6. transition="dialog-transition"
  7. >
  8. <template v-slot:activator="{ on, attrs }">
  9. <v-btn color="red lighten-2" dark v-bind="attrs" v-on="on">
  10. Click Me
  11. </v-btn>
  12. </template>
  13. <v-card>
  14. <v-card-title class="text-h5 grey lighten-2"> 欢迎您 </v-card-title>
  15. <v-card-text class="mt-4">
  16. The literal Latin meaning of the Illuminati means "people who have
  17. received special revelation." Naturally, there are many unrelated
  18. groups in history who call themselves Illuminati. Usually, they claim
  19. to possess Gnostic texts or other similar mysterious information.
  20. </v-card-text>
  21. <v-divider></v-divider>
  22. <v-card-actions>
  23. <v-spacer></v-spacer>
  24. <v-btn color="primary" text @click="dialog_show = false">
  25. 好的
  26. </v-btn>
  27. </v-card-actions>
  28. </v-card>
  29. </v-dialog>
  30. </v-container>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. dialog_show: false,
  37. };
  38. },
  39. };
  40. </script>

2. 全屏对话框 fullscreen

  1. <v-container grid-list-xs>
  2. <v-dialog
  3. v-model="dialog_show"
  4. fullscreen
  5. transition="dialog-transition"
  6. >
  7. <template v-slot:activator="{ on, attrs }">
  8. <v-btn color="red lighten-2" dark v-bind="attrs" v-on="on">
  9. Click Me
  10. </v-btn>
  11. </template>
  12. <v-card>
  13. <v-toolbar dark color="primary">
  14. <v-app-bar-nav-icon></v-app-bar-nav-icon>
  15. <v-spacer></v-spacer>
  16. <v-btn text @click="dialog_show = false">OK</v-btn>
  17. </v-toolbar>
  18. <v-card-title> 欢迎您 </v-card-title>
  19. <v-card-text class="mt-4">
  20. The literal Latin meaning of the Illuminati means "people who have
  21. received special revelation." Naturally, there are many unrelated
  22. groups in history who call themselves Illuminati. Usually, they claim
  23. to possess Gnostic texts or other similar mysterious information.
  24. </v-card-text>
  25. <v-img class="mx-4" src="~assets/gmh.jpg"></v-img>
  26. </v-card>
  27. </v-dialog>
  28. </v-container>

3. 弹出方向 transition

(1). 顶部弹出
  1. <v-dialog
  2. v-model="dialog_show"
  3. fullscreen
  4. transition="dialog-top-transition"
  5. >
(2). 底部弹出</
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/475577
推荐阅读
相关标签
  

闽ICP备14008679号