tt-mp/es/timeline-item/index.js

一套组件化、可复用、易扩展的头条小程序 UI 组件库

import baseComponent from '../helpers/baseComponent'
import classNames from '../helpers/classNames'
import styleToCssString from '../helpers/styleToCssString'

baseComponent({
  relations: {
    '../timeline/index': {
      type: 'parent',
    },
  },
  properties: {
    prefixCls: {
      type: String,
      value: 'wux-timeline-item',
    },
    content: {
      type: String,
      value: '',
    },
    dotStyle: {
      type: [String, Object],
      value: '',
      observer(newVal) {
        this.setData({
          extStyle: styleToCssString(newVal),
        })
      },
    },
    custom: {
      type: Boolean,
      value: false,
    },
  },
  data: {
    isLast: false,
    isPending: false,
    pending: false,
    className: '',
    extStyle: '',
  },
  computed: {
    classes: [
      'prefixCls, isLast, pending, isPending, custom',
      function (prefixCls, isLast, pending, isPending, custom) {
        const wrap = classNames(prefixCls, {
          [`${prefixCls}--last`]: isLast,
          [`${prefixCls}--pending`]: pending,
        })
        const tail = classNames(`${prefixCls}__tail`, {
          [`${prefixCls}__tail--pending`]: isPending,
        })
        const dot = classNames(`${prefixCls}__dot`, {
          [`${prefixCls}__dot--custom`]: custom,
        })
        const content = `${prefixCls}__content`

        return {
          wrap,
          tail,
          dot,
          content,
        }
      },
    ],
  },
  methods: {
    updateIsLastElement({ index, isLast, isPending, pending, position }) {
      const { prefixCls } = this.data
      const className =
        position === 'alternate'
          ? index % 2 === 0
            ? `${prefixCls}--alternate ${prefixCls}--left`
            : `${prefixCls}--alternate ${prefixCls}--right`
          : position === 'right'
          ? `${prefixCls}--right`
          : ''
      this.setData({ isLast, isPending, pending, className })
    },
  },
})