@fesjs/fes-design/es/progress/components/LineProgress.js

fes-design for PC

import { defineComponent, computed, createVNode } from 'vue';
import { lineProgressProps } from '../props';

var LineProgress = defineComponent({
  props: lineProgressProps,
  setup(props, _ref) {
    let {
      slots
    } = _ref;
    // 获取进度条每段的样式
    const getProgressStyle = (percent, color) => {
      return {
        borderRadius: `${props.height / 2}px`,
        background: color,
        width: `${percent}%`,
        height: `${props.height}px`
      };
    };

    // 进度条外圈样式
    const lineProgressBarStyle = computed(() => {
      return {
        height: `${props.height}px`,
        borderRadius: `${props.height / 2}px`
      };
    });

    // 百分比文本展示内容样式，宽度自适应
    const valueStyle = computed(() => {
      return {
        height: `${props.height}px`,
        lineHeight: `${props.height}px`
      };
    });
    const renderProgress = () => {
      return createVNode("div", {
        "class": "progress-item",
        "style": getProgressStyle(props.percent, props.color)
      }, [renderInnerText(props.percent)]);
    };

    // 渲染条状的进度条
    const renderLineProgress = () => {
      return createVNode("div", {
        "class": "line-progress-container"
      }, [createVNode("div", {
        "class": "line-progress-bar",
        "style": lineProgressBarStyle.value
      }, [createVNode("div", {
        "class": "progress"
      }, [renderProgress()])]), props.showOutPercent ? renderText() : null]);
    };

    // 渲染文案（条形情况下 代替外显百分比）
    const renderText = () => {
      // 如果有文案插槽，就渲染，前提是要开启外显百分比
      return slots.text ? createVNode("div", {
        "class": "out-value"
      }, [slots.text()]) : createVNode("div", {
        "class": "out-value",
        "style": valueStyle.value
      }, [`${props.percent}%`]);
    };

    // 渲染内部展示的内容
    const renderInnerText = percent => {
      // 开启showInnerPercent，宽度大于25px或者 高度大于12px，才展示
      const show = props.showInnerPercent && props.height >= 12;
      return show ? createVNode("div", {
        "class": "inner-value",
        "style": valueStyle.value
      }, [`${percent}%`]) : null;
    };
    return () => renderLineProgress();
  }
});

export { LineProgress as default };