Notice.js 3.3 KB

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