overlay.ts 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import Overlay from '../../overlay';
  2. import { context } from './context';
  3. import { mount } from '../../utils/functional';
  4. export type OverlayConfig = {
  5. zIndex?: number;
  6. className?: string;
  7. customStyle?: string | object[] | object;
  8. };
  9. const defaultConfig: OverlayConfig = {
  10. className: '',
  11. customStyle: {}
  12. };
  13. let overlay: any;
  14. // close popup when click overlay && closeOnClickOverlay is true
  15. function onClickOverlay(): void {
  16. if (context.top) {
  17. const { vm } = context.top;
  18. vm.$emit('click-overlay');
  19. if (vm.closeOnClickOverlay) {
  20. if (vm.onClickOverlay) {
  21. vm.onClickOverlay();
  22. } else {
  23. vm.close();
  24. }
  25. }
  26. }
  27. }
  28. export function updateOverlay(): void {
  29. if (!overlay) {
  30. overlay = mount(Overlay, {
  31. on: {
  32. click: onClickOverlay
  33. }
  34. });
  35. }
  36. if (context.top) {
  37. const { vm, config } = context.top;
  38. const el = vm.$el;
  39. const target = el && el.parentNode ? el.parentNode : document.body;
  40. if (target) {
  41. target.appendChild(overlay.$el);
  42. }
  43. Object.assign(overlay, defaultConfig, config, {
  44. visible: true
  45. });
  46. } else {
  47. overlay.visible = false;
  48. }
  49. }
  50. export function openOverlay(vm: any, config: OverlayConfig): void {
  51. if (!context.stack.some(item => item.vm === vm)) {
  52. context.stack.push({ vm, config });
  53. updateOverlay();
  54. }
  55. }
  56. export function closeOverlay(vm: any): void {
  57. const { stack } = context;
  58. if (stack.length) {
  59. if (context.top.vm === vm) {
  60. stack.pop();
  61. updateOverlay();
  62. } else {
  63. context.stack = stack.filter(item => item.vm !== vm);
  64. }
  65. }
  66. }