index.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. import styleToCssString from '../helpers/styleToCssString'
  4. baseComponent({
  5. relations: {
  6. '../timeline/index': {
  7. type: 'parent',
  8. },
  9. },
  10. properties: {
  11. prefixCls: {
  12. type: String,
  13. value: 'wux-timeline-item',
  14. },
  15. content: {
  16. type: String,
  17. value: '',
  18. },
  19. dotStyle: {
  20. type: [String, Object],
  21. value: '',
  22. observer(newVal) {
  23. this.setData({
  24. extStyle: styleToCssString(newVal),
  25. })
  26. },
  27. },
  28. custom: {
  29. type: Boolean,
  30. value: false,
  31. },
  32. },
  33. data: {
  34. isLast: false,
  35. isPending: false,
  36. pending: false,
  37. className: '',
  38. extStyle: '',
  39. },
  40. computed: {
  41. classes() {
  42. const { prefixCls, isLast, pending, isPending, custom } = this.data
  43. const wrap = classNames(prefixCls, {
  44. [`${prefixCls}--last`]: isLast,
  45. [`${prefixCls}--pending`]: pending,
  46. })
  47. const tail = classNames(`${prefixCls}__tail`, {
  48. [`${prefixCls}__tail--pending`]: isPending,
  49. })
  50. const dot = classNames(`${prefixCls}__dot`, {
  51. [`${prefixCls}__dot--custom`]: custom,
  52. })
  53. const content = `${prefixCls}__content`
  54. return {
  55. wrap,
  56. tail,
  57. dot,
  58. content,
  59. }
  60. },
  61. },
  62. methods: {
  63. updateIsLastElement({ index, isLast, isPending, pending, position }) {
  64. const { prefixCls } = this.data
  65. const className = position === 'alternate' ? index % 2 === 0 ? `${prefixCls}--alternate ${prefixCls}--left` : `${prefixCls}--alternate ${prefixCls}--right` : position === 'right' ? `${prefixCls}--right` : ''
  66. this.setData({ isLast, isPending, pending, className })
  67. },
  68. },
  69. })