index.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. import { $wuxBackdrop } from '../index'
  4. const defaults = {
  5. prefixCls: 'wux-loading',
  6. classNames: 'wux-animate--fadeIn',
  7. text: '数据加载中',
  8. mask: true,
  9. transparent: true,
  10. }
  11. baseComponent({
  12. useFunc: true,
  13. data: defaults,
  14. computed: {
  15. classes() {
  16. const { prefixCls } = this.data
  17. const wrap = classNames(prefixCls)
  18. const content = classNames(`${prefixCls}__content`, {
  19. [`${prefixCls}__content--has-icon`]: true,
  20. })
  21. const icon = classNames(`${prefixCls}__icon`, {
  22. [`${prefixCls}__icon--loading`]: true,
  23. })
  24. const text = `${prefixCls}__text`
  25. return {
  26. wrap,
  27. content,
  28. icon,
  29. text,
  30. }
  31. },
  32. },
  33. methods: {
  34. /**
  35. * 隐藏
  36. */
  37. hide() {
  38. this.$$setData({ in: false })
  39. this.$wuxBackdrop && this.$wuxBackdrop.release()
  40. },
  41. /**
  42. * 显示
  43. */
  44. show(opts = {}) {
  45. const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts))
  46. this.$$setData({ in: true, ...options })
  47. this.$wuxBackdrop && this.$wuxBackdrop.retain()
  48. },
  49. },
  50. created() {
  51. if (this.data.mask) {
  52. this.$wuxBackdrop = $wuxBackdrop('#wux-backdrop', this)
  53. }
  54. },
  55. })