index.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. const defaults = {
  4. prefixCls: 'wux-toptips',
  5. classNames: 'wux-animate--slideInDown',
  6. icon: 'cancel',
  7. hidden: false,
  8. text: '',
  9. duration: 3000,
  10. success() {},
  11. }
  12. let _toptips = null
  13. baseComponent({
  14. useFunc: true,
  15. data: defaults,
  16. computed: {
  17. classes() {
  18. const { prefixCls } = this.data
  19. const ico = this.data.icon ? this.data.icon : 'cancel'
  20. const wrap = classNames(prefixCls)
  21. const content = classNames(`${prefixCls}__content`, {
  22. [`${prefixCls}__content--${ico}`]: ico,
  23. })
  24. const icon = `${prefixCls}__icon`
  25. return {
  26. wrap,
  27. content,
  28. icon,
  29. }
  30. },
  31. },
  32. methods: {
  33. /**
  34. * 隐藏
  35. */
  36. hide() {
  37. if (this.removed) return false
  38. this.removed = true
  39. if (_toptips) {
  40. clearTimeout(_toptips.timeout)
  41. _toptips = null
  42. }
  43. this.$$setData({ in: false })
  44. if (typeof this.fns.success === 'function') {
  45. this.fns.success()
  46. }
  47. },
  48. /**
  49. * 显示
  50. */
  51. show(opts = {}) {
  52. const closePromise = new Promise((resolve) => {
  53. const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts))
  54. const callback = () => {
  55. this.hide()
  56. return resolve(true)
  57. }
  58. this.removed = false
  59. this.$$setData({ in: true, ...options })
  60. if (_toptips) {
  61. clearTimeout(_toptips.timeout)
  62. _toptips = null
  63. }
  64. _toptips = {
  65. hide: this.hide,
  66. }
  67. _toptips.timeout = setTimeout(callback, options.duration)
  68. })
  69. const result = () => {
  70. if (_toptips) {
  71. _toptips.hide.call(this)
  72. }
  73. }
  74. result.then = (resolve, reject) => closePromise.then(resolve, reject)
  75. result.promise = closePromise
  76. return result
  77. },
  78. success(opts = {}) {
  79. return this.show(Object.assign({
  80. icon: 'success',
  81. }, opts))
  82. },
  83. info(opts = {}) {
  84. return this.show(Object.assign({
  85. icon: 'info',
  86. }, opts))
  87. },
  88. warn(opts = {}) {
  89. return this.show(Object.assign({
  90. icon: 'warn',
  91. }, opts))
  92. },
  93. error(opts = {}) {
  94. return this.show(Object.assign({
  95. icon: 'cancel',
  96. }, opts))
  97. },
  98. },
  99. })