index.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. baseComponent({
  4. properties: {
  5. prefixCls: {
  6. type: String,
  7. value: 'wux-spin',
  8. },
  9. classNames: {
  10. type: null,
  11. value: 'wux-animate--fadeIn',
  12. },
  13. tip: {
  14. type: String,
  15. value: '',
  16. },
  17. size: {
  18. type: String,
  19. value: 'default',
  20. },
  21. spinning: {
  22. type: Boolean,
  23. value: true,
  24. observer: 'updated',
  25. },
  26. nested: {
  27. type: Boolean,
  28. value: false,
  29. },
  30. },
  31. data: {
  32. spinVisible: true,
  33. },
  34. computed: {
  35. classes() {
  36. const { prefixCls, size, nested, tip: showText, spinVisible } = this.data
  37. const wrap = classNames(prefixCls, {
  38. [`${prefixCls}--${size}`]: size,
  39. [`${prefixCls}--nested`]: nested,
  40. [`${prefixCls}--show-text`]: showText,
  41. })
  42. const anim = !nested ? `${prefixCls}__spinning` : `${prefixCls}__spinning--nested`
  43. const dots = `${prefixCls}__dots`
  44. const dot = `${prefixCls}__dot`
  45. const tip = `${prefixCls}__tip`
  46. const container = classNames(`${prefixCls}__container`, {
  47. [`${prefixCls}__container--blur`]: spinVisible,
  48. })
  49. return {
  50. wrap,
  51. anim,
  52. dots,
  53. dot,
  54. tip,
  55. container,
  56. }
  57. },
  58. },
  59. methods: {
  60. updated(spinVisible) {
  61. if (this.data.nested) {
  62. this.setData({
  63. spinVisible,
  64. })
  65. }
  66. },
  67. },
  68. })