Dialog.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <q-dialog v-model="active" no-route-dismiss>
  3. <div class="column bg-white no-wrap">
  4. <div class="header row">
  5. <div class="caption col row items-center q-ml-md">
  6. <slot name="header"></slot>
  7. </div>
  8. <div class="close-icon column justify-center items-center">
  9. <q-btn v-close-popup flat round dense>
  10. <q-icon name="la la-times" size="18px"></q-icon>
  11. </q-btn>
  12. </div>
  13. </div>
  14. <div class="col q-mx-md">
  15. <slot></slot>
  16. </div>
  17. <div class="row justify-end q-pa-md">
  18. <slot name="footer"></slot>
  19. </div>
  20. </div>
  21. </q-dialog>
  22. </template>
  23. <script>
  24. //-----------------------------------------------------------------------------
  25. import vueComponent from '../vueComponent.js';
  26. class Dialog {
  27. _props = {
  28. modelValue: Boolean,
  29. };
  30. get active() {
  31. return this.modelValue;
  32. }
  33. set active(value) {
  34. this.$emit('update:modelValue', value);
  35. }
  36. }
  37. export default vueComponent(Dialog);
  38. //-----------------------------------------------------------------------------
  39. </script>
  40. <style scoped>
  41. .header {
  42. height: 50px;
  43. }
  44. .caption {
  45. font-size: 110%;
  46. overflow: hidden;
  47. }
  48. .close-icon {
  49. width: 50px;
  50. }
  51. </style>