@ued_fpi/data-visual/dist/es/wgms/src/common/ProgressBar.vue.mjs

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

import { defineComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode } from 'vue';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ProgressBar",
  props: {
    /**
     * 进度条高度
     */
    barHeight: {
      type: Number,
      default: 8
    },
    /**
     * 进度条背景色
     */
    bgColor: {
      type: String,
      default: "var(--dv-color-fill-lighter)"
    },
    /**
     * 激活部分背景色
     */
    activeColor: {
      type: String,
      default: "linear-gradient(270deg, var(--dv-color-index) 0%, var(--dv-color-index-30) 100%)"
    },
    /**
     * 百分比
     */
    percentage: {
      type: Number,
      default: 0
    },
    /**
     * 手柄颜色
     */
    handleStyle: {
      type: Object,
      default: () => {
        return {
          background: "var(--dv-color-index)",
          width: "2px",
          height: "12px"
        };
      }
    }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "dv-wgms-bar-box",
        style: normalizeStyle({ height: `${__props.barHeight}px`, background: __props.bgColor })
      }, [
        createElementVNode("div", {
          class: "stand-bar",
          style: normalizeStyle({ width: `${__props.percentage}%`, background: __props.activeColor })
        }, null, 4),
        createElementVNode("div", {
          class: "bar-head",
          style: normalizeStyle(__props.handleStyle)
        }, null, 4)
      ], 4);
    };
  }
});

export { _sfc_main as default };