项目初始化

sheep/ui/su-progress/su-progress.vue

@@ -0,0 +1,203 @@
+<template>
+  <view>
+    <view class="flex a-center content" v-if="lineData">
+      <view>
+        <slot name="content"></slot>
+      </view>
+    </view>
+    <view class="flex a-center" style="padding-right: 10rpx">
+      <view
+        class="progress-container"
+        id="container"
+        ref="progressContainer"
+        :style="{ background: inBgColor }"
+      >
+        <view
+          class="progress-content flex j-end"
+          id="content"
+          ref="progressContent"
+          :style="{
+            height: strokeWidth + 'px',
+            background: bgColor,
+            width: contentWidth,
+            transition: `width ${duration / 1000}s ease`,
+          }"
+          v-if="isAnimate"
+        >
+          <view class="textInside flex a-center j-center" v-if="textInside && !noData">
+            <view class="text">{{ percentage }}%</view>
+          </view>
+        </view>
+        <view
+          v-if="!isAnimate"
+          class="progress-content flex j-end"
+          :style="{ width: percentage + '%', height: strokeWidth + 'px', background: bgColor }"
+        >
+          <view class="textInside flex a-center j-center" v-if="textInside && !noData">
+            <view class="text">{{ percentage }}%</view>
+          </view>
+        </view>
+      </view>
+      <view>
+        <view class="percentage" v-if="!textInside && !lineData && !noData && !isAnimate"
+          >{{ percentage }}%
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'AiProgress',
+    components: {},
+    props: {
+      // 进度条的值
+      percentage: {
+        type: [Number, String],
+        required: true,
+      },
+      // 是否内联显示数据
+      textInside: {
+        type: Boolean,
+        default: false,
+      },
+      // 进度条高度
+      strokeWidth: {
+        type: [Number, String],
+        default: 6,
+      },
+      // 默认动画时长
+      duration: {
+        type: [Number, String],
+        default: 2000,
+      },
+      // 是否有动画
+      isAnimate: {
+        type: Boolean,
+        default: false,
+      },
+      // 背景颜色
+      bgColor: {
+        type: String,
+        default: 'linear-gradient(90deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)',
+      },
+      // 是否不显示数据
+      noData: {
+        type: Boolean,
+        default: false,
+      },
+      // 是否自定义显示内容
+      lineData: {
+        type: Boolean,
+        default: false,
+      },
+      // 自定义底色
+      inBgColor: {
+        type: String,
+        default: '#ebeef5',
+      },
+    },
+    data() {
+      return {
+        width: 0,
+        timer: null,
+        containerWidth: 0,
+        contentWidth: 0,
+      };
+    },
+    methods: {
+      start() {
+        if (this.isAnimate) {
+          // #ifdef H5
+          this.$nextTick(() => {
+            let progressContainer = this.$refs.progressContainer.$el;
+            let progressContent = this.$refs.progressContent.$el;
+            let style = window.getComputedStyle(progressContainer, null);
+            let width = style.width.replace('px', '') * ((this.percentage * 1) / 100);
+            progressContent.style.width = width.toFixed(2) + 'px';
+            progressContent.style.transition = `width ${this.duration / 1000}s ease`;
+          });
+          // #endif
+          const container = uni.createSelectorQuery().in(this).selectAll('#container');
+          const content = uni.createSelectorQuery().in(this).selectAll('#content');
+          container.boundingClientRect().exec((res1) => {
+            this.contentWidth =
+              res1[0][0].width * 1 * ((this.percentage * 1) / 100).toFixed(2) + 'px';
+          });
+        }
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.start();
+      });
+    },
+    created() {},
+    filters: {},
+    computed: {},
+    watch: {},
+    directives: {},
+  };
+</script>
+
+<style scoped lang="scss">
+  .content {
+    margin-bottom: 10px;
+
+    .c-per {
+      font-size: 26px;
+    }
+  }
+
+  .progress-container {
+    width: 100%;
+    border-radius: 100px;
+
+    .progress-content {
+      border-radius: 100px;
+      width: 0;
+    }
+
+    .textInside {
+      color: #fff;
+      margin-right: 10rpx;
+      position: relative;
+    }
+  }
+
+  .text {
+    margin-left: 10rpx;
+    font-size: 16rpx;
+    width: 100rpx;
+    color: #FFB9B9;
+  }
+
+  .percentage {
+    margin-left: 6px;
+    font-size: 12px;
+    width: 30px;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .a-center {
+    align-items: center;
+  }
+
+  .j-center {
+    justify-content: center;
+  }
+
+  .j-between {
+    justify-content: space-between;
+  }
+
+  .content {
+    margin-bottom: 10px;
+    color: #666;
+    font-size: 32rpx;
+  }
+</style>