ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines • 10.9 kB

Source Map (JSON)

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-progress/index.vue"],"sourcesContent":["<template>\r\n <div :class=\"wrapClasses\">\r\n \r\n <div :class=\"outerClasser\">\r\n \r\n <div :class=\"innerClasser\">\r\n \r\n <div :class=\"bgClasser\" :style=\"bgStyles\">\r\n \r\n <div :class=\"`${prefixCls}-inner-text`\" v-if=\"textInside\">\r\n {{ percent }}%\r\n </div>\r\n </div>\r\n \r\n <div :class=\"successBgClasses\" :style=\"successBgStyles\"></div>\r\n </div>\r\n </div>\r\n \r\n <span :class=\"textClasses\" v-if=\"!hideInfo && !textInside\">\r\n <slot>\r\n \r\n <span v-if=\"isStatus\" :class=\"textInnerClasses\">\r\n <ivue-icon v-if=\"!icon\">{{ statusIcon }}</ivue-icon>\r\n <i :class=\"icon\" v-else></i>\r\n </span>\r\n \r\n <span v-else :class=\"textInnerClasses\">{{ percent }}%</span>\r\n </slot>\r\n </span>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, ref, onMounted, watch } from 'vue';\r\nimport { oneOf } from '../../utils/assist';\r\n\r\nimport IvueIcon from '../ivue-icon/index.vue';\r\n\r\n// type\r\nimport type { Props } from './types/progress';\r\n\r\nconst prefixCls = 'ivue-progress';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n emits: ['on-status-change'],\r\n props: {\r\n /**\r\n * 状态，可选值为normal、active、wrong、success\r\n *\r\n * @type {String}\r\n */\r\n status: {\r\n type: String,\r\n validator(value: string) {\r\n return oneOf(value, [\r\n 'normal',\r\n 'active',\r\n 'wrong',\r\n 'success',\r\n 'warning',\r\n ]);\r\n },\r\n default: 'normal',\r\n },\r\n /**\r\n * 隐藏数值或状态图标\r\n *\r\n * @type {Boolean}\r\n */\r\n hideInfo: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 百分比是否置于进度条内\r\n *\r\n * @type {Boolean}\r\n */\r\n textInside: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 已完成的分段百分比\r\n *\r\n * @type {Number}\r\n */\r\n successPercent: {\r\n type: Number,\r\n default: 0,\r\n },\r\n /**\r\n * 百分比\r\n *\r\n * @type {Number}\r\n */\r\n percent: {\r\n type: Number,\r\n default: 0,\r\n },\r\n /**\r\n * 进度条的线宽，单位 px\r\n *\r\n * @type {Number}\r\n */\r\n strokeWidth: {\r\n type: Number,\r\n default: 10,\r\n },\r\n /**\r\n * 是否在垂直方向显示\r\n *\r\n * @type {Boolean}\r\n */\r\n vertical: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 进度条的颜色\r\n *\r\n * @type {String | Array}\r\n */\r\n strokeColor: {\r\n type: [String, Array],\r\n },\r\n /**\r\n * 进度条阴影颜色\r\n *\r\n * @type {String}\r\n */\r\n boxShadowColor: {\r\n type: String,\r\n },\r\n /**\r\n * 状态图标\r\n *\r\n * @type {String}\r\n */\r\n icon: {\r\n type: String,\r\n },\r\n /**\r\n * 是否为动画进度条\r\n *\r\n * @type {Boolean}\r\n */\r\n indeterminate: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 控制动画进度条速度\r\n *\r\n * @type {Number}\r\n */\r\n duration: {\r\n type: Number,\r\n default: 3,\r\n },\r\n },\r\n setup(props: Props, { emit }) {\r\n // data\r\n const currentStatus = ref<string>(props.status);\r\n\r\n // computed\r\n\r\n // 外层样式\r\n const wrapClasses = computed(() => {\r\n return [\r\n `${prefixCls}`,\r\n `${prefixCls}-${currentStatus.value}`,\r\n {\r\n [`${prefixCls}-show-info`]: !props.hideInfo && !props.textInside,\r\n [`${prefixCls}-vertical`]: props.vertical,\r\n },\r\n ];\r\n });\r\n\r\n // 进度条样式\r\n const outerClasser = computed(() => {\r\n return `${prefixCls}-outer`;\r\n });\r\n\r\n // 内容样式\r\n const innerClasser = computed(() => {\r\n return `${prefixCls}-inner`;\r\n });\r\n\r\n //背景样式\r\n const bgClasser = computed(() => {\r\n return {\r\n [`${prefixCls}-bg`]: true,\r\n [`${prefixCls}-indeterminate`]: props.indeterminate,\r\n };\r\n });\r\n\r\n //状态样式\r\n const textClasses = computed(() => {\r\n return `${prefixCls}-text`;\r\n });\r\n\r\n // 文字样式\r\n const textInnerClasses = computed(() => {\r\n return `${prefixCls}-text`;\r\n });\r\n\r\n // 已完成的分段百分比 class\r\n const successBgClasses = computed(() => {\r\n return `${prefixCls}-success-bg`;\r\n });\r\n\r\n // 已完成的分段百分比 style\r\n const successBgStyles = computed(() => {\r\n let style = {};\r\n\r\n // 垂直方向\r\n if (props.vertical) {\r\n style = {\r\n height: `${props.successPercent}%`,\r\n width: `${props.strokeWidth}px`,\r\n };\r\n } else {\r\n style = {\r\n width: `${props.successPercent}%`,\r\n height: `${props.strokeWidth}px`,\r\n };\r\n }\r\n\r\n return style;\r\n });\r\n\r\n //背景样式\r\n const bgStyles = computed(() => {\r\n let style: {\r\n height?: string;\r\n width?: string;\r\n boxShadow?: string;\r\n animationDuration?: string;\r\n backgroundColor?: string;\r\n backgroundImage?: string;\r\n } = {};\r\n\r\n // 垂直方向\r\n if (props.vertical) {\r\n style = {\r\n height: `${props.percent}%`,\r\n width: `${props.strokeWidth}px`,\r\n };\r\n } else {\r\n style = {\r\n width: `${props.percent}%`,\r\n height: `${props.strokeWidth}px`,\r\n boxShadow: `0 0px 5px ${props.boxShadowColor}`,\r\n };\r\n }\r\n\r\n // 是否有进度条颜色\r\n if (props.strokeColor) {\r\n if (typeof props.strokeColor === 'string') {\r\n style.backgroundColor = props.strokeColor;\r\n } else {\r\n style.backgroundImage = `linear-gradient(to right, ${props.strokeColor[0]} 0%, ${props.strokeColor[1]} 100%)`;\r\n }\r\n }\r\n\r\n style.animationDuration = `${props.duration}s`;\r\n\r\n return style;\r\n });\r\n\r\n // 状态图标\r\n const statusIcon = computed(() => {\r\n let type = '';\r\n\r\n // 警告\r\n if (currentStatus.value === 'warning') {\r\n type = 'warning';\r\n }\r\n\r\n // 错误\r\n if (currentStatus.value === 'wrong') {\r\n type = 'cancel';\r\n }\r\n\r\n // 成功\r\n if (currentStatus.value === 'success') {\r\n type = 'check_circle';\r\n }\r\n\r\n return type;\r\n });\r\n\r\n // 是否有状态\r\n const isStatus = computed(() => {\r\n return (\r\n currentStatus.value === 'wrong' ||\r\n currentStatus.value === 'success' ||\r\n currentStatus.value === 'warning'\r\n );\r\n });\r\n\r\n // methods\r\n\r\n // 状态事件\r\n const handleStatus = (init: boolean) => {\r\n // 初始化\r\n if (init) {\r\n currentStatus.value = 'normal';\r\n\r\n emit('on-status-change', 'normal');\r\n }\r\n // 成功状态\r\n else {\r\n if (parseInt(`${props.percent}`, 10) == 100) {\r\n currentStatus.value = 'success';\r\n\r\n emit('on-status-change', 'success');\r\n }\r\n }\r\n };\r\n\r\n // onMounted\r\n onMounted(() => {\r\n handleStatus(false);\r\n });\r\n\r\n // watch\r\n\r\n // 监听进度条\r\n watch(\r\n () => props.percent,\r\n (value, oldValue) => {\r\n if (value < oldValue) {\r\n handleStatus(true);\r\n } else {\r\n handleStatus(false);\r\n }\r\n }\r\n );\r\n\r\n // 监听状态\r\n watch(\r\n () => props.status,\r\n (status) => {\r\n currentStatus.value = status;\r\n }\r\n );\r\n\r\n return {\r\n prefixCls,\r\n\r\n // data\r\n currentStatus,\r\n\r\n // computed\r\n wrapClasses,\r\n outerClasser,\r\n innerClasser,\r\n bgClasser,\r\n bgStyles,\r\n textClasses,\r\n textInnerClasses,\r\n statusIcon,\r\n isStatus,\r\n successBgClasses,\r\n successBgStyles,\r\n\r\n // methods\r\n handleStatus,\r\n };\r\n },\r\n components: {\r\n IvueIcon,\r\n },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_normalizeClass","_createCommentVNode","_createElementVNode","_normalizeStyle","_openBlock","_createElementBlock","_withCtx","_Fragment"],"mappings":";;;;;+BACEA,iBA4BM,WAAA,CAAA,CAAA;;IA3BJ,KAAA,EAAYC,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,GACZ,EAAA;AAAA,IAAAC,mBAAW,sBAAE,CAAA;AAAA,IAAAC,mBAAA,KAAA,EAAA;AAAA,MACX,KAAA,EAAaF,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,KACb,EAAA;AAAA,MAAAC,mBAAW,4BAAE,CAAA;AAAA,MAAAC,mBAAA,KAAA,EAAA;AAAA,QACX,KAAA,EAAWF,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,OACX,EAAA;AAAA,QAAAC,mBAAW,gBAAE,CAAA;AAAA,QAAAC,mBAAiB,KAAE,EAAA;AAAA,UAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,UAC9B,KAAA,EAAoBG,cAAA,CAAA,IAAA,CAAA,QAAA,CAAA;AAAA,SAC0B,EAAA;AAAA,UAA9CF,mBAAA,sEAAA,CAAA;AAAA,UAAA,IAAA,CAAA,UAAA,IAAAG,SAAW,EAAA,qBAAK,KAAS,EAAA;AAAA,YAAA,GAAA,EAAA,CAAA;AAAA;yDAI3BH,kBAAkB,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,WAC4C,CAAA,CAAA;AAAA,QAAAA,mBAAnD,0DAAE,CAAA;AAAA,QAAAC,mBAAwB,KAAE,EAAA;AAAA,UAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,gBAAA,CAAA;AAAA;;SAG3C,CAAA,CAAA;AAAA,OACkC,CAAQ,CAAA;AAAA,IAA1CC,mBAAA,4BAAA,CAAA;AAAA,IAAA,CAAA,KAAA,QAAA,IAAA,CAAA,KAAA,UAAA,IAAAG,SAAA,uBAAc,MAAW,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,MACvB,KAAA,EAQOJ,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,KAAA,EAAA;AAAA,iBANO,IAAQ,CAAA,MAAA,EAAA,SAAA,EAAA,IAAA,MAAA;AAAA,QAApBC,mBAAA,gBAAA,CAAA;AAAA,QAAA,IAAA,CAAA,QAAA,IAAAG,SAA4B,EAAA,EAAEC,mBAAA,MAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;AAAA,iBACVL,cAAI,CAAA,IAAA,CAAA,gBAAA,CAAA;AAAA,SAAA,EAAA;AAAA,qEAAK,EAAA,EAAU,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,YAAA,OAAA,EAAAM,QAAA,MAAA;AAAA;;;0BAC5B,EAAA,EAAMD,mBAAA,GAAA,EAAA;AAAA,YAAA,GAAA,EAAA,CAAA;AAAA;WAGjB,EAAA,MAAA,CAAA,CAAA,CAAA;AAAA,SAAA,EADA,gBACA,EAAA,EAA4DA,mBAAAE,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,UAAAN,mBAAzC,gBAAE,CAAA;AAAA,UAAqBC,mBAAA,MAAA,EAAA;AAAA,YAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,gBAAA,CAAA;AAAA;;;;;;;;;;"}