Portal.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  2. import PropTypes from './vue-types';
  3. import { defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onUpdated, Teleport, watch } from 'vue';
  4. import { useInjectPortal } from '../vc-trigger/context';
  5. export default defineComponent({
  6. compatConfig: {
  7. MODE: 3
  8. },
  9. name: 'Portal',
  10. inheritAttrs: false,
  11. props: {
  12. getContainer: PropTypes.func.isRequired,
  13. didUpdate: Function
  14. },
  15. setup: function setup(props, _ref) {
  16. var slots = _ref.slots;
  17. var isSSR = true;
  18. // getContainer 不会改变,不用响应式
  19. var container;
  20. var _useInjectPortal = useInjectPortal(),
  21. shouldRender = _useInjectPortal.shouldRender;
  22. onBeforeMount(function () {
  23. isSSR = false;
  24. if (shouldRender.value) {
  25. container = props.getContainer();
  26. }
  27. });
  28. var stopWatch = watch(shouldRender, function () {
  29. if (shouldRender.value && !container) {
  30. container = props.getContainer();
  31. }
  32. if (container) {
  33. stopWatch();
  34. }
  35. });
  36. onUpdated(function () {
  37. nextTick(function () {
  38. if (shouldRender.value) {
  39. var _props$didUpdate;
  40. (_props$didUpdate = props.didUpdate) === null || _props$didUpdate === void 0 ? void 0 : _props$didUpdate.call(props, props);
  41. }
  42. });
  43. });
  44. onBeforeUnmount(function () {
  45. if (container && container.parentNode) {
  46. container.parentNode.removeChild(container);
  47. }
  48. });
  49. return function () {
  50. if (!shouldRender.value) return null;
  51. if (isSSR) {
  52. var _slots$default;
  53. return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
  54. }
  55. return container ? _createVNode(Teleport, {
  56. "to": container
  57. }, slots) : null;
  58. };
  59. }
  60. });