Notice.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import PropTypes from '../_util/vue-types';
  3. import { getStyle, getComponentFromProp, getListeners } from '../_util/props-util';
  4. import BaseMixin from '../_util/BaseMixin';
  5. function noop() {}
  6. export default {
  7. mixins: [BaseMixin],
  8. props: {
  9. duration: PropTypes.number.def(1.5),
  10. closable: PropTypes.bool,
  11. prefixCls: PropTypes.string,
  12. update: PropTypes.bool,
  13. closeIcon: PropTypes.any
  14. },
  15. watch: {
  16. duration: function duration() {
  17. this.restartCloseTimer();
  18. }
  19. },
  20. mounted: function mounted() {
  21. this.startCloseTimer();
  22. },
  23. updated: function updated() {
  24. if (this.update) {
  25. this.restartCloseTimer();
  26. }
  27. },
  28. beforeDestroy: function beforeDestroy() {
  29. this.clearCloseTimer();
  30. this.willDestroy = true; // beforeDestroy调用后依然会触发onMouseleave事件
  31. },
  32. methods: {
  33. close: function close(e) {
  34. if (e) {
  35. e.stopPropagation();
  36. }
  37. this.clearCloseTimer();
  38. this.__emit('close');
  39. },
  40. startCloseTimer: function startCloseTimer() {
  41. var _this = this;
  42. this.clearCloseTimer();
  43. if (!this.willDestroy && this.duration) {
  44. this.closeTimer = setTimeout(function () {
  45. _this.close();
  46. }, this.duration * 1000);
  47. }
  48. },
  49. clearCloseTimer: function clearCloseTimer() {
  50. if (this.closeTimer) {
  51. clearTimeout(this.closeTimer);
  52. this.closeTimer = null;
  53. }
  54. },
  55. restartCloseTimer: function restartCloseTimer() {
  56. this.clearCloseTimer();
  57. this.startCloseTimer();
  58. }
  59. },
  60. render: function render() {
  61. var _className;
  62. var h = arguments[0];
  63. var prefixCls = this.prefixCls,
  64. closable = this.closable,
  65. clearCloseTimer = this.clearCloseTimer,
  66. startCloseTimer = this.startCloseTimer,
  67. $slots = this.$slots,
  68. close = this.close;
  69. var componentClass = prefixCls + '-notice';
  70. var className = (_className = {}, _defineProperty(_className, '' + componentClass, 1), _defineProperty(_className, componentClass + '-closable', closable), _className);
  71. var style = getStyle(this);
  72. var closeIcon = getComponentFromProp(this, 'closeIcon');
  73. return h(
  74. 'div',
  75. {
  76. 'class': className,
  77. style: style || { right: '50%' },
  78. on: {
  79. 'mouseenter': clearCloseTimer,
  80. 'mouseleave': startCloseTimer,
  81. 'click': getListeners(this).click || noop
  82. }
  83. },
  84. [h(
  85. 'div',
  86. { 'class': componentClass + '-content' },
  87. [$slots['default']]
  88. ), closable ? h(
  89. 'a',
  90. {
  91. attrs: { tabIndex: '0' },
  92. on: {
  93. 'click': close
  94. },
  95. 'class': componentClass + '-close' },
  96. [closeIcon || h('span', { 'class': componentClass + '-close-x' })]
  97. ) : null]
  98. );
  99. }
  100. };