Notice.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  10. var _default = exports.default = (0, _vue.defineComponent)({
  11. name: 'Notice',
  12. inheritAttrs: false,
  13. props: ['prefixCls', 'duration', 'updateMark', 'noticeKey', 'closeIcon', 'closable', 'props', 'onClick', 'onClose', 'holder', 'visible'],
  14. setup(props, _ref) {
  15. let {
  16. attrs,
  17. slots
  18. } = _ref;
  19. let closeTimer;
  20. let isUnMounted = false;
  21. const duration = (0, _vue.computed)(() => props.duration === undefined ? 4.5 : props.duration);
  22. const startCloseTimer = () => {
  23. if (duration.value && !isUnMounted) {
  24. closeTimer = setTimeout(() => {
  25. close();
  26. }, duration.value * 1000);
  27. }
  28. };
  29. const clearCloseTimer = () => {
  30. if (closeTimer) {
  31. clearTimeout(closeTimer);
  32. closeTimer = null;
  33. }
  34. };
  35. const close = e => {
  36. if (e) {
  37. e.stopPropagation();
  38. }
  39. clearCloseTimer();
  40. const {
  41. onClose,
  42. noticeKey
  43. } = props;
  44. if (onClose) {
  45. onClose(noticeKey);
  46. }
  47. };
  48. const restartCloseTimer = () => {
  49. clearCloseTimer();
  50. startCloseTimer();
  51. };
  52. (0, _vue.onMounted)(() => {
  53. startCloseTimer();
  54. });
  55. (0, _vue.onUnmounted)(() => {
  56. isUnMounted = true;
  57. clearCloseTimer();
  58. });
  59. (0, _vue.watch)([duration, () => props.updateMark, () => props.visible], (_ref2, _ref3) => {
  60. let [preDuration, preUpdateMark, preVisible] = _ref2;
  61. let [newDuration, newUpdateMark, newVisible] = _ref3;
  62. if (preDuration !== newDuration || preUpdateMark !== newUpdateMark || preVisible !== newVisible && newVisible) {
  63. restartCloseTimer();
  64. }
  65. }, {
  66. flush: 'post'
  67. });
  68. return () => {
  69. var _a, _b;
  70. const {
  71. prefixCls,
  72. closable,
  73. closeIcon = (_a = slots.closeIcon) === null || _a === void 0 ? void 0 : _a.call(slots),
  74. onClick,
  75. holder
  76. } = props;
  77. const {
  78. class: className,
  79. style
  80. } = attrs;
  81. const componentClass = `${prefixCls}-notice`;
  82. const dataOrAriaAttributeProps = Object.keys(attrs).reduce((acc, key) => {
  83. if (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') {
  84. acc[key] = attrs[key];
  85. }
  86. return acc;
  87. }, {});
  88. const node = (0, _vue.createVNode)("div", (0, _objectSpread2.default)({
  89. "class": (0, _classNames.default)(componentClass, className, {
  90. [`${componentClass}-closable`]: closable
  91. }),
  92. "style": style,
  93. "onMouseenter": clearCloseTimer,
  94. "onMouseleave": startCloseTimer,
  95. "onClick": onClick
  96. }, dataOrAriaAttributeProps), [(0, _vue.createVNode)("div", {
  97. "class": `${componentClass}-content`
  98. }, [(_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots)]), closable ? (0, _vue.createVNode)("a", {
  99. "tabindex": 0,
  100. "onClick": close,
  101. "class": `${componentClass}-close`
  102. }, [closeIcon || (0, _vue.createVNode)("span", {
  103. "class": `${componentClass}-close-x`
  104. }, null)]) : null]);
  105. if (holder) {
  106. return (0, _vue.createVNode)(_vue.Teleport, {
  107. "to": holder
  108. }, {
  109. default: () => node
  110. });
  111. }
  112. return node;
  113. };
  114. }
  115. });