tt-mp/core/progress/index.js

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

import baseComponent from '../helpers/baseComponent'
import classNames from '../helpers/classNames'
import styleToCssString from '../helpers/styleToCssString'
import { colors } from '../helpers/colors'

const defaultColors = {
  normal: colors.primary,
  progress: colors.primary,
  error: colors.error,
  success: colors.success,
}

baseComponent({
  properties: {
    prefixCls: {
      type: String,
      value: 'wux-progress',
    },
    percent: {
      type: Number,
      value: 0,
      observer: 'updateStyle',
    },
    strokeWidth: {
      type: Number,
      value: 10,
      observer: 'updateStyle',
    },
    activeColor: {
      type: String,
      value: '',
      observer: 'updateStyle',
    },
    backgroundColor: {
      type: String,
      value: '#f3f3f3',
    },
    status: {
      type: String,
      value: 'normal',
      observer: 'updateStyle',
    },
    shape: {
      type: String,
      value: 'round',
    },
    barStyle: {
      type: [String, Object],
      value: '',
      observer(newVal) {
        this.setData({
          extStyle: styleToCssString(newVal),
        })
      },
    },
    showInfo: {
      type: Boolean,
      value: false,
    },
  },
  data: {
    width: 0,
    style: '',
    extStyle: '',
  },
  computed: {
    classes: [
      'prefixCls, shape, status',
      function (prefixCls, shape, status) {
        const wrap = classNames(prefixCls, {
          [`${prefixCls}--${shape}`]: shape,
          [`${prefixCls}--${status}`]: status,
        })
        const outer = `${prefixCls}__outer`
        const inner = `${prefixCls}__inner`
        const bar = `${prefixCls}__bar`
        const text = `${prefixCls}__text`

        return {
          wrap,
          outer,
          inner,
          bar,
          text,
        }
      },
    ],
  },
  methods: {
    updateStyle(opts = {}) {
      const { percent, strokeWidth, activeColor, status } = Object.assign(
        {},
        this.data,
        opts
      )
      const width = percent < 0 ? 0 : percent > 100 ? 100 : percent
      const height = strokeWidth > 0 ? strokeWidth : 10
      const backgroundColor = activeColor
        ? activeColor
        : defaultColors[status] || defaultColors['normal']
      const style = `background-color: ${backgroundColor}; width: ${width}%; height: ${height}px;`

      this.setData({
        width,
        style,
      })
    },
  },
  attached() {
    this.updateStyle()
  },
})