song-ui-u

Version:

vue3 + js的PC前端组件库

1 lines • 3.52 kB

Source Map (JSON)

{"version":3,"file":"index.vue.cjs","sources":["../../../../../packages/components/progress/src/index.vue"],"sourcesContent":["<script setup>\r\nimport { useNamespace, useStyle } from \"@ui-library/hook\";\r\nimport { ref, watch, computed } from \"vue\";\r\n\r\ndefineOptions({\r\n name: \"x-progress\",\r\n});\r\n\r\n// 定义 props\r\nconst props = defineProps({\r\n // 当前进度 (0 - 100)\r\n value: {\r\n type: [Number, String],\r\n default: 0,\r\n },\r\n\r\n // 状态\r\n status: {\r\n type: String,\r\n default: \"\",\r\n },\r\n\r\n // 自定义文本\r\n format: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n color: {\r\n type: String,\r\n default: \"\",\r\n },\r\n\r\n type: {\r\n type: String,\r\n default: \"\",\r\n },\r\n\r\n // 进度条高度\r\n height: {\r\n type: [Number, String],\r\n default: 20,\r\n },\r\n});\r\n\r\nconst { bgColor, color, borderColor, height } = useStyle();\r\n\r\nconst styleBgColor = computed(() => bgColor(props.color));\r\nconst styleTextColor = computed(() => color(props.color));\r\nconst styleBorderColor = computed(() => borderColor(props.color));\r\nconst styleHeight = computed(() => height(props.height));\r\n\r\n// 定义内部状态\r\nconst progress = ref(0);\r\n\r\n// 监听传入的 value 值变化\r\nwatch(\r\n () => props.value,\r\n (newValue) => {\r\n if (newValue >= 0 && newValue <= 100) {\r\n progress.value = newValue;\r\n } else {\r\n console.warn(\"进度值应在 0 到 100 之间\");\r\n }\r\n },\r\n { immediate: true } // 立即执行一次\r\n);\r\n\r\nconst ns = useNamespace(\"progress\");\r\n</script>\r\n\r\n<template>\r\n <div :class=\"[ns.b(), ns.m(status)]\">\r\n \r\n <div :class=\"ns.e('bar')\" :style=\"{ ...styleBorderColor, ...styleHeight }\">\r\n \r\n <div\r\n :class=\"[ns.e('inner')]\"\r\n :style=\"{ width: progress + '%', ...styleBgColor }\"\r\n >\r\n <div :class=\"ns.e('inner-content')\" v-if=\"$slots.default\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <span v-if=\"!format\" :class=\"[ns.e('text')]\" :style=\"styleTextColor\"\r\n >{{ progress }}%</span\r\n >\r\n <span v-else :class=\"[ns.e('text')]\" :style=\"styleTextColor\">{{\r\n format\r\n }}</span>\r\n </div>\r\n</template>\r\n"],"names":["useStyle","computed","ref","watch","useNamespace"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAc;AAMX;AACH;AACA;AACA,MAAM,KAAK,GAAG,OAiCZ,CAAC;AACH;AACA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAGA,cAAQ,EAAE,CAAC;AAC3D;AACA,MAAM,YAAY,GAAGC,YAAQ,CAAC,MAAM,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,MAAM,cAAc,GAAGA,YAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,MAAM,gBAAgB,GAAGA,YAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClE,MAAM,WAAW,GAAGA,YAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;AACzD;AACA;AACA,MAAM,QAAQ,GAAGC,OAAG,CAAC,CAAC,CAAC,CAAC;AACxB;AACA;AACAC,SAAK;AACL,EAAE,MAAM,KAAK,CAAC,KAAK;AACnB,EAAE,CAAC,QAAQ,KAAK;AAChB,IAAI,IAAI,QAAQ,IAAI,CAAC,IAAI,QAAQ,IAAI,GAAG,EAAE;AAC1C,MAAM,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC;AAChC,KAAK,MAAM;AACX,MAAM,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;AACvC,KAAK;AACL,GAAG;AACH,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE;AACrB,CAAC,CAAC;AACF;AACA,MAAM,EAAE,GAAGC,oBAAY,CAAC,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}