song-ui-u/lib/components/progress/src/index.vue.cjs

vue3 + js的PC前端组件库

'use strict';

var index$1 = require('../../../hook/use-namespace/index.cjs');
var vue = require('vue');
var index = require('../../../hook/use-style/index.cjs');
require('../../../hook/use-zindex/index.cjs');
var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.cjs');

const _sfc_main = /*#__PURE__*/Object.assign({
  name: "x-progress",
}, {
  __name: 'index',
  props: {
  // 当前进度 (0 - 100)
  value: {
    type: [Number, String],
    default: 0,
  },

  //   状态
  status: {
    type: String,
    default: "",
  },

  //   自定义文本
  format: {
    type: Boolean,
    default: false,
  },
  color: {
    type: String,
    default: "",
  },

  type: {
    type: String,
    default: "",
  },

  //   进度条高度
  height: {
    type: [Number, String],
    default: 20,
  },
},
  setup(__props, { expose: __expose }) {
  __expose();



// 定义 props
const props = __props;

const { bgColor, color, borderColor, height } = index.useStyle();

const styleBgColor = vue.computed(() => bgColor(props.color));
const styleTextColor = vue.computed(() => color(props.color));
const styleBorderColor = vue.computed(() => borderColor(props.color));
const styleHeight = vue.computed(() => height(props.height));

// 定义内部状态
const progress = vue.ref(0);

// 监听传入的 value 值变化
vue.watch(
  () => props.value,
  (newValue) => {
    if (newValue >= 0 && newValue <= 100) {
      progress.value = newValue;
    } else {
      console.warn("进度值应在 0 到 100 之间");
    }
  },
  { immediate: true } // 立即执行一次
);

const ns = index$1.useNamespace("progress");

const __returned__ = { props, bgColor, color, borderColor, height, styleBgColor, styleTextColor, styleBorderColor, styleHeight, progress, ns, get useNamespace() { return index$1.useNamespace }, get useStyle() { return index.useStyle }, ref: vue.ref, watch: vue.watch, computed: vue.computed };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}

});

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass([$setup.ns.b(), $setup.ns.m($props.status)])
  }, [
    vue.createCommentVNode(" 外层容器 "),
    vue.createElementVNode("div", {
      class: vue.normalizeClass($setup.ns.e('bar')),
      style: vue.normalizeStyle({ ...$setup.styleBorderColor, ...$setup.styleHeight })
    }, [
      vue.createCommentVNode(" 内部填充部分，表示进度 "),
      vue.createElementVNode("div", {
        class: vue.normalizeClass([$setup.ns.e('inner')]),
        style: vue.normalizeStyle({ width: $setup.progress + '%', ...$setup.styleBgColor })
      }, [
        (_ctx.$slots.default)
          ? (vue.openBlock(), vue.createElementBlock("div", {
              key: 0,
              class: vue.normalizeClass($setup.ns.e('inner-content'))
            }, [
              vue.renderSlot(_ctx.$slots, "default")
            ], 2 /* CLASS */))
          : vue.createCommentVNode("v-if", true)
      ], 6 /* CLASS, STYLE */)
    ], 6 /* CLASS, STYLE */),
    vue.createCommentVNode(" 显示进度百分比 "),
    (!$props.format)
      ? (vue.openBlock(), vue.createElementBlock("span", {
          key: 0,
          class: vue.normalizeClass([$setup.ns.e('text')]),
          style: vue.normalizeStyle($setup.styleTextColor)
        }, vue.toDisplayString($setup.progress) + "%", 7 /* TEXT, CLASS, STYLE */))
      : (vue.openBlock(), vue.createElementBlock("span", {
          key: 1,
          class: vue.normalizeClass([$setup.ns.e('text')]),
          style: vue.normalizeStyle($setup.styleTextColor)
        }, vue.toDisplayString($props.format), 7 /* TEXT, CLASS, STYLE */))
  ], 2 /* CLASS */))
}
var progress = /*#__PURE__*/_pluginVue_exportHelper(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\progress\\src\\index.vue"]]);

module.exports = progress;
//# sourceMappingURL=index.vue.cjs.map