init

uni_modules/nutui-uni/components/circleprogress/circleprogress.ts

@@ -0,0 +1,36 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumericProp, makeStringProp, truthProp } from '../_utils'
+
+export const circleprogressProps = {
+  ...commonProps,
+  /**
+   * @description 进度百分比
+   */
+  progress: makeNumericProp(0),
+  /**
+   * @description 圆弧的宽度
+   */
+  strokeWidth: makeNumericProp(5),
+  /**
+   * @description 半径
+   */
+  radius: makeNumericProp(50),
+  /**
+   * @description 圆环进度条端点形状，可选值为 `square`、`round`、`butt`
+   */
+  strokeLinecap: makeStringProp<'butt' | 'round' | 'square'>('round'),
+  /**
+   * @description 圆环进度条颜色
+   */
+  customColor: { type: [String, Object], default: '#FF673E' },
+  /**
+   * @description 圆环轨道颜色
+   */
+  pathColor: makeStringProp('#d9d9d9'),
+  /**
+   * @description 是否顺时针展示
+   */
+  clockwise: truthProp,
+}
+
+export type CircleProgressProps = ExtractPropTypes<typeof circleprogressProps>

uni_modules/nutui-uni/components/circleprogress/circleprogress.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, defineComponent, ref, watch } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass, getMainStyle, getRandomId, pxCheck } from '../_utils'
+import { circleprogressProps } from './circleprogress'
+
+interface Item {
+  key?: string
+  value?: string
+}
+const props = defineProps(circleprogressProps)
+const isIos = uni.getSystemInfoSync().platform === 'ios'
+const currentRate = ref(props.progress)
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+const getStyle = computed(() => {
+  return getMainStyle(props, {
+    height: `${pxCheck(Number(props.radius) * 2)}`,
+    width: `${pxCheck(Number(props.radius) * 2)}`,
+  })
+})
+const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object'
+
+function transColor(color: string | undefined) {
+  return color && color.replace('#', '%23')
+}
+function stop() {
+  if (!isObject(props.customColor))
+    return []
+
+  const color = props.customColor
+  const colorArr = Object.keys(color).sort((a, b) => Number.parseFloat(a) - Number.parseFloat(b))
+
+  const stopArr: object[] = []
+  colorArr.forEach((item) => {
+    const obj = {
+      key: '',
+      value: '',
+    }
+    obj.key = item
+    obj.value = color[item]
+    stopArr.push(obj)
+  })
+  return stopArr
+}
+
+const style = computed(() => {
+  const { strokeWidth } = props
+
+  const stopArr: Array<object> = stop()
+  const stopDom: string[] = []
+  if (stopArr) {
+    stopArr.forEach((item: Item) => {
+      let obj = ''
+      obj = `%3Cstop offset='${item.key}' stop-color='${transColor(item.value)}'/%3E`
+      stopDom.push(obj)
+    })
+  }
+  const perimeter = 283
+  const progress = +currentRate.value!
+  const offset = (perimeter * Number(format(Number.parseFloat(progress.toFixed(1))))) / 100
+  const isWise = props.clockwise ? 1 : 0
+  const color = isObject(props.customColor) ? `url(%23${getRandomId()})` : transColor(props.customColor)
+  const d = `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`
+  const pa = `%3Cdefs%3E%3ClinearGradient id='${getRandomId()}' x1='100%25' y1='0%25' x2='0%25' y2='0%25'%3E${stopDom}%3C/linearGradient%3E%3C/defs%3E`
+  const path = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke='${transColor(props.pathColor)}' fill='none'/%3E`
+  const path1 = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke-dasharray='${offset},${perimeter}' stroke-linecap='round' stroke='${color}' fill='none'/%3E`
+
+  return {
+    background: `url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100'  xmlns='http://www.w3.org/2000/svg'%3E${pa}${path}${path1}%3C/svg%3E")`,
+    width: '100%',
+    height: '100%',
+    transition: `${isIos ? '' : 'background-image .3s ease 0s, '}stroke .3s ease 0s`,
+  }
+})
+const format = (progress: string | number) => Math.min(Math.max(+progress, 0), 100)
+
+watch(
+  () => props.progress,
+  (value) => {
+    currentRate.value = Math.min(Math.max(+value!, 0), 100)
+  },
+)
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-circle-progress`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <div :class="classes" :style="getStyle">
+    <div :style="style" />
+    <div class="nut-circle-progress__text">
+      <slot>
+        <span>{{ progress }}%</span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/circleprogress/index.scss

@@ -0,0 +1,33 @@
+.nut-theme-dark {
+  .nut-circle-progress{
+    .nut-circle-progress__text {
+      color: $dark-color;
+    }
+  }
+  
+}
+
+.nut-circle-progress {
+  position: relative;
+
+  &__hover {
+    stroke: $circleprogress-primary-color;
+    transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
+  }
+
+  &__path {
+    stroke: $circleprogress-path-color;
+  }
+
+  &__text {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    font-size: $circleprogress-text-size;
+    color: $circleprogress-text-color;
+    text-align: center;
+    transform: translateY(-50%);
+  }
+}

uni_modules/nutui-uni/components/circleprogress/index.ts

@@ -0,0 +1 @@
+export * from './circleprogress'