index.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. import styleToCssString from '../helpers/libs/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: ['prefixCls, isLast, pending, isPending, custom', function(prefixCls, isLast, pending, isPending, custom) {
  42. const wrap = classNames(prefixCls, {
  43. [`${prefixCls}--last`]: isLast,
  44. [`${prefixCls}--pending`]: pending,
  45. })
  46. const tail = classNames(`${prefixCls}__tail`, {
  47. [`${prefixCls}__tail--pending`]: isPending,
  48. })
  49. const dot = classNames(`${prefixCls}__dot`, {
  50. [`${prefixCls}__dot--custom`]: custom,
  51. })
  52. const content = `${prefixCls}__content`
  53. return {
  54. wrap,
  55. tail,
  56. dot,
  57. content,
  58. }
  59. }],
  60. },
  61. methods: {
  62. updateIsLastElement({ index, isLast, isPending, pending, position }) {
  63. const { prefixCls } = this.data
  64. const className = position === 'alternate' ? index % 2 === 0 ? `${prefixCls}--alternate ${prefixCls}--left` : `${prefixCls}--alternate ${prefixCls}--right` : position === 'right' ? `${prefixCls}--right` : ''
  65. this.setData({ isLast, isPending, pending, className })
  66. },
  67. },
  68. })