1 line
6.7 KiB
Plaintext
1 line
6.7 KiB
Plaintext
{"version":3,"file":"su-progress.js","sources":["../../../../../../src/sheep/ui/su-progress/su-progress.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1wcm9ncmVzcy9zdS1wcm9ncmVzcy52dWU"],"sourcesContent":["<template>\r\n <view>\r\n <view class=\"flex a-center content\" v-if=\"lineData\">\r\n <view>\r\n <slot name=\"content\"></slot>\r\n </view>\r\n </view>\r\n <view class=\"flex a-center\" style=\"padding-right: 10rpx\">\r\n <view\r\n class=\"progress-container\"\r\n id=\"container\"\r\n ref=\"progressContainer\"\r\n :style=\"{ background: inBgColor }\"\r\n >\r\n <view\r\n class=\"progress-content flex j-end\"\r\n id=\"content\"\r\n ref=\"progressContent\"\r\n :style=\"{\r\n height: strokeWidth + 'px',\r\n background: bgColor,\r\n width: contentWidth,\r\n transition: `width ${duration / 1000}s ease`,\r\n }\"\r\n v-if=\"isAnimate\"\r\n >\r\n <view class=\"textInside flex a-center j-center\" v-if=\"textInside && !noData\">\r\n <view class=\"text\">{{ percentage }}%</view>\r\n </view>\r\n </view>\r\n <view\r\n v-if=\"!isAnimate\"\r\n class=\"progress-content flex j-end\"\r\n :style=\"{ width: percentage + '%', height: strokeWidth + 'px', background: bgColor }\"\r\n >\r\n <view class=\"textInside flex a-center j-center\" v-if=\"textInside && !noData\">\r\n <view class=\"text\">{{ percentage }}%</view>\r\n </view>\r\n </view>\r\n </view>\r\n <view>\r\n <view class=\"percentage\" v-if=\"!textInside && !lineData && !noData && !isAnimate\">\r\n {{ percentage }}%\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'AiProgress',\r\n components: {},\r\n props: {\r\n // 进度条的值\r\n percentage: {\r\n type: [Number, String],\r\n required: true,\r\n },\r\n // 是否内联显示数据\r\n textInside: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n // 进度条高度\r\n strokeWidth: {\r\n type: [Number, String],\r\n default: 6,\r\n },\r\n // 默认动画时长\r\n duration: {\r\n type: [Number, String],\r\n default: 2000,\r\n },\r\n // 是否有动画\r\n isAnimate: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n // 背景颜色\r\n bgColor: {\r\n type: String,\r\n default: 'linear-gradient(90deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)',\r\n },\r\n // 是否不显示数据\r\n noData: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n // 是否自定义显示内容\r\n lineData: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n // 自定义底色\r\n inBgColor: {\r\n type: String,\r\n default: '#ebeef5',\r\n },\r\n },\r\n data() {\r\n return {\r\n width: 0,\r\n timer: null,\r\n containerWidth: 0,\r\n contentWidth: 0,\r\n }\r\n },\r\n methods: {\r\n start() {\r\n if (this.isAnimate) {\r\n // #ifdef H5\r\n this.$nextTick(() => {\r\n const progressContainer = this.$refs.progressContainer.$el\r\n const progressContent = this.$refs.progressContent.$el\r\n const style = window.getComputedStyle(progressContainer, null)\r\n const width = style.width.replace('px', '') * ((this.percentage * 1) / 100)\r\n progressContent.style.width = width.toFixed(2) + 'px'\r\n progressContent.style.transition = `width ${this.duration / 1000}s ease`\r\n })\r\n // #endif\r\n const container = uni.createSelectorQuery().in(this).selectAll('#container')\r\n const content = uni.createSelectorQuery().in(this).selectAll('#content')\r\n container.boundingClientRect().exec((res1) => {\r\n this.contentWidth = res1[0][0].width * 1 * ((this.percentage * 1) / 100).toFixed(2) + 'px'\r\n })\r\n }\r\n },\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.start()\r\n })\r\n },\r\n created() {},\r\n filters: {},\r\n computed: {},\r\n watch: {},\r\n directives: {},\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.content {\r\n margin-bottom: 10px;\r\n\r\n .c-per {\r\n font-size: 26px;\r\n }\r\n}\r\n\r\n.progress-container {\r\n width: 100%;\r\n border-radius: 100px;\r\n\r\n .progress-content {\r\n width: 0;\r\n border-radius: 100px;\r\n }\r\n\r\n .textInside {\r\n position: relative;\r\n margin-right: 10rpx;\r\n color: #fff;\r\n }\r\n}\r\n\r\n.text {\r\n width: 100rpx;\r\n margin-left: 10rpx;\r\n font-size: 16rpx;\r\n color: #ffb9b9;\r\n}\r\n\r\n.percentage {\r\n width: 30px;\r\n margin-left: 6px;\r\n font-size: 12px;\r\n}\r\n\r\n.flex {\r\n display: flex;\r\n}\r\n\r\n.a-center {\r\n align-items: center;\r\n}\r\n\r\n.j-center {\r\n justify-content: center;\r\n}\r\n\r\n.j-between {\r\n justify-content: space-between;\r\n}\r\n\r\n.content {\r\n margin-bottom: 10px;\r\n font-size: 32rpx;\r\n color: #666;\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-progress/su-progress.vue'\nwx.createComponent(Component)"],"names":["uni"],"mappings":";;AAkDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY,CAAE;AAAA,EACd,OAAO;AAAA;AAAA,IAEL,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,UAAU;AAAA,IACX;AAAA;AAAA,IAED,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA,IAED,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACV;AAAA;AAAA,IAED,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACV;AAAA;AAAA,IAED,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA,IAED,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA,IAED,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA,IAED,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA,IAED,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EACD,OAAO;AACL,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,cAAc;AAAA,IAChB;AAAA,EACD;AAAA,EACD,SAAS;AAAA,IACP,QAAQ;AACN,UAAI,KAAK,WAAW;AAWlB,cAAM,YAAYA,cAAG,MAAC,oBAAqB,EAAC,GAAG,IAAI,EAAE,UAAU,YAAY;AAC3DA,sBAAG,MAAC,oBAAmB,EAAG,GAAG,IAAI,EAAE,UAAU,UAAU;AACvE,kBAAU,mBAAkB,EAAG,KAAK,CAAC,SAAS;AAC5C,eAAK,eAAe,KAAK,CAAC,EAAE,CAAC,EAAE,QAAQ,KAAM,KAAK,aAAa,IAAK,KAAK,QAAQ,CAAC,IAAI;AAAA,SACvF;AAAA,MACH;AAAA,IACD;AAAA,EACF;AAAA,EACD,UAAU;AACR,SAAK,UAAU,MAAM;AACnB,WAAK,MAAM;AAAA,KACZ;AAAA,EACF;AAAA,EACD,UAAU;AAAA,EAAE;AAAA,EACZ,SAAS,CAAE;AAAA,EACX,UAAU,CAAE;AAAA,EACZ,OAAO,CAAE;AAAA,EACT,YAAY,CAAE;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1IA,GAAG,gBAAgB,SAAS;"} |