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
|