shu-c-view/packages/inner-progress/index.js

rollup 打包vue@2.7组件库框架

/**
 * @desc BaseInnerProgress 内部进度条
 */
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import _has from 'lodash/has';
import _get from 'lodash/get';
import { devConsole } from '../helper/util.js';

const BaseInnerProgress = {
  props: {
    options: {
      // 静态数据
      type: Array,
      default: () => []
    },
    // 进度条父元素背景颜色
    outerBackgroundColor: {
      type: String,
      default: 'rgba(247, 248, 250, 100)'
    },
    isShowOuterBackground: {
      // 是否展示进度条父元素背景
      type: Boolean,
      default: true
    },
    // 展示名称
    displayName: {
      type: String,
      default: 'name'
    },
    // 百分比数值
    percentValue: {
      type: String,
      default: 'percent'
    },
    // 进度条背景
    colors: {
      type: Array,
      default: () => ['green', 'pink', 'red', 'yellow']
    },
    // 保留小数位
    toFixed: {
      type: Number
    },
    // 最外层高度
    outerHeight: {
      type: String,
      default: '20px'
    },
    // 外部传入值是否已经是计算后的百分比后数值
    isPercent: {
      type: Boolean,
      default: true
    },
    // 当前值
    currentValue: {
      type: [String]
    },
    // 累计值
    totalValue: {
      type: [String]
    },
    // 对返回的百分比数据进行特殊处理
    dealPercentValue: {
      type: Function
    }
  },
  data() {
    return {
      toFixedNumber: null // 保留小数位
    };
  },
  methods: {
    // 创建进度条
    createProgress() {
      const vNodes = [];
      const h = this.$createElement;
      for (let i = 0; i < this.options.length; i++) {
        const defaultValue = this.options[i][this.percentValue];
        const dealValue =
          (this.options[i][this.currentValue] /
            this.options[i][this.totalValue]) *
          100;
        const percentValue = this.isPercent ? defaultValue : dealValue;
        const vNode = h('div', {
          class: {
            'base-progress-item': true
          },
          style: {
            display: 'flex',
            height: '100%',
            'background-color': this.colors[i % this.colors.length],
            width: `${percentValue}%`
          }
        });
        vNodes.push(vNode);
      }
      return vNodes;
    },
    // 创建进度图下侧描述
    createDesc() {
      const vNodes = [];
      const h = this.$createElement;
      for (let i = 0; i < this.options.length; i++) {
        const defaultValue = this.options[i][this.percentValue];
        const dealValue =
          (this.options[i][this.currentValue] /
            this.options[i][this.totalValue]) *
          100;
        const percentValue = this.isPercent ? defaultValue : dealValue;
        const vNode = h(
          'div',
          {
            class: 'base-progress-desc-item'
          },
          [
            h(
              'div',
              {
                class: 'base-progress-desc-item-dot',
                style: {
                  'background-color': this.colors[i % this.colors.length]
                }
              },
              []
            ),
            h('div', { class: 'base-progress-desc-item-name' }, [
              this.options[i][this.displayName]
            ]),

            _get(this, 'dealPercentValue')
              ? `${this.dealPercentValue(percentValue)}%`
              : `${this.dealValue(percentValue)}%`
          ]
        );
        vNodes.push(vNode);
      }
      return vNodes;
    },
    dealValue(value) {
      if (value || value === 0) {
        return value.toFixed(this.toFixedNumber);
      }
      return '-';
    },
    createInnerProgress() {
      const h = this.$createElement;

      const nodes = [
        h(
          'div',
          {
            ref: `${this.uid}-base-progress-outer`,
            class: 'base-progress-outer',
            style: {
              width: '100%',
              height: this.outerHeight,
              'background-color':
                this.isShowOuterBackground &&
                _has(this.$props, 'outerBackgroundColor')
                  ? this.outerBackgroundColor
                  : ''
            }
          },
          [
            h(
              'div',
              {
                style: {
                  display: 'flex',
                  height: '100%'
                }
              },
              this.createProgress()
            )
          ]
        ),
        h(
          'div',
          {
            class: 'base-progress-desc'
          },
          this.createDesc()
        )
      ];
      return nodes;
    }
  },
  render(h) {
    this.toFixedNumber = _get(this, 'toFixed', 2);
    return h('div', {}, this.createInnerProgress());
  }
};
BaseInnerProgress.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole(`按需加载独立组件：${BaseInnerProgress.name}`);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i++) {
      if (ElComponents[i].name !== BaseInnerProgress.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseInnerProgress.name, BaseInnerProgress);
};
export { BaseInnerProgress };