Notice.js 4.1 KB

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