@cqmcui/cqmcui/dist/packages/_es/Progress.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { useSlots, ref, computed, onMounted, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createVNode } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { Checked } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { create } = createComponent("progress");
const _sfc_main = create({
  components: { Checked },
  props: {
    percentage: {
      type: [Number, String],
      default: 0,
      required: true
    },
    size: {
      type: String,
      default: "base"
    },
    status: {
      type: String,
      default: ""
    },
    strokeWidth: {
      type: [Number, String],
      default: ""
    },
    textInside: {
      type: Boolean,
      default: false
    },
    showText: {
      type: Boolean,
      default: true
    },
    strokeColor: {
      type: String,
      default: ""
    },
    textColor: {
      type: String,
      default: ""
    },
    textBackground: {
      type: String,
      default: ""
    },
    isShowPercentage: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const slotDefault = !!useSlots().default;
    const height = ref(props.strokeWidth + "px");
    const progressOuter = ref();
    const insideText = ref();
    const percentage = computed(() => {
      return props.percentage >= 100 ? 100 : props.percentage;
    });
    const bgStyle = computed(() => {
      return {
        width: percentage.value + "%",
        background: props.strokeColor || ""
      };
    });
    const textStyle = computed(() => {
      return {
        color: props.textColor || ""
      };
    });
    onMounted(() => {
    });
    return {
      height,
      percentage,
      bgStyle,
      textStyle,
      progressOuter,
      insideText,
      slotDefault
    };
  }
});
const _hoisted_1 = { class: "cqmc-progress" };
const _hoisted_2 = {
  key: 0,
  class: "cqmc-progress-text"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Checked = resolveComponent("Checked");
  return openBlock(), createElementBlock("div", _hoisted_1, [
    createElementVNode("div", {
      class: normalizeClass(["cqmc-progress-outer", [_ctx.showText && !_ctx.textInside ? "cqmc-progress-outer-part" : "", _ctx.size ? "cqmc-progress-" + _ctx.size : ""]]),
      ref: "progressOuter",
      style: normalizeStyle({ height: _ctx.height })
    }, [
      createElementVNode("div", {
        class: normalizeClass(["cqmc-progress-inner", _ctx.status == "active" ? "cqmc-active" : ""]),
        style: normalizeStyle(_ctx.bgStyle)
      }, null, 6),
      _ctx.showText && _ctx.textInside && !_ctx.slotDefault ? (openBlock(), createElementBlock("div", {
        key: 0,
        class: "cqmc-progress-text cqmc-progress-insidetext",
        ref: "insideText",
        style: normalizeStyle({
          lineHeight: _ctx.height,
          left: `${_ctx.percentage}%`,
          transform: `translate(-${+_ctx.percentage}%,-50%)`,
          background: _ctx.textBackground || _ctx.strokeColor
        })
      }, [
        createElementVNode("span", {
          style: normalizeStyle(_ctx.textStyle)
        }, toDisplayString(_ctx.percentage) + toDisplayString(_ctx.isShowPercentage ? "%" : ""), 5)
      ], 4)) : createCommentVNode("", true),
      _ctx.showText && _ctx.textInside && _ctx.slotDefault ? (openBlock(), createElementBlock("div", {
        key: 1,
        ref: "insideText",
        style: normalizeStyle({
          position: `absolute`,
          top: `50%`,
          left: `${_ctx.percentage}%`,
          transform: `translate(-${+_ctx.percentage}%,-50%)`
        })
      }, [
        renderSlot(_ctx.$slots, "default")
      ], 4)) : createCommentVNode("", true)
    ], 6),
    _ctx.showText && !_ctx.textInside ? (openBlock(), createElementBlock("div", _hoisted_2, [
      _ctx.status == "active" || _ctx.status == "" ? (openBlock(), createElementBlock("span", {
        key: 0,
        style: normalizeStyle(_ctx.textStyle)
      }, toDisplayString(_ctx.percentage) + toDisplayString(_ctx.isShowPercentage ? "%" : ""), 5)) : _ctx.status == "icon" ? renderSlot(_ctx.$slots, "icon-name", { key: 1 }, () => [
        createVNode(_component_Checked, {
          width: "15px",
          height: "15px",
          color: "#439422"
        })
      ]) : createCommentVNode("", true)
    ])) : createCommentVNode("", true)
  ]);
}
const Progress = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  Progress as default
};