Notice.js 3.3 KB

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