nutui/src/packages/__VUE/circleprogress/doc.md

CircleProgress 环形进度条

介绍

圆环形的进度条组件

安装

import { createApp } from 'vue';
//vue
import { CircleProgress } from '@nutui/nutui';
//taro
import { CircleProgress } from '@nutui/nutui-taro';

const app = createApp();
app.use(CircleProgress);

基础用法

:::demo

<template>
    <nut-cell>
     <nut-circle-progress :progress="20"> </nut-circle-progress>
   </nut-cell>
</template>

:::

环形进度条自定义宽度

:::demo

<template>
    <nut-cell>
     <nut-circle-progress :progress="50" strokeWidth="10"> </nut-circle-progress>
   </nut-cell>
</template>

:::

环形进度条自定义颜色(支持渐变色)

:::demo

<template>
    <nut-cell>
    <nut-circle-progress :progress="50" color="red" />
      <nut-circle-progress :progress="100" :color="gradientColor" />
   </nut-cell>
</template>
<script>
import { ref } from 'vue';
export default{
  setup() {
     const gradientColor = {
      '0%': '#FF5E5E',
      '100%': '#FFA062'
    };
    return {
      gradientColor
    };
  }
}
</script>

:::

环形进度条自定义大小

:::demo

<template>
    <nut-cell>
     <nut-circle-progress :progress="50" radius="60"></nut-circle-progress>
    </nut-cell>
</template>

:::

环形进度条自定义内容

:::demo

<template>
    <nut-cell>
     <nut-circle-progress :progress="50" radius="60">自定义</nut-circle-progress>
    </nut-cell>
</template>

:::

动态改变环形进度条的进度

:::demo

<template>
  <div>
     <nut-circle-progress :progress="percent"></nut-circle-progress>
  </div>
  <div>
    <nut-button type="primary" @click="setReduceVal">减少</nut-button>
    <nut-button type="primary" @click="setAddVal">增加</nut-button>
  </div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {
  setup() {
    const percent = ref(30);
    const setAddVal = () => {
      if (percent.value >= 100) {
        return;
      }
      percent.value += 10;
    };
    const setReduceVal = () => {
      if (percent.value - 10 <= 0) {
        percent.value = 0;
        return;
      }
      percent.value -= 10;
    };
    return {
      setAddVal,
      setReduceVal,
      percent
    };
  }
}
</script>

:::

API

Props

字段	说明	类型	默认值
progress	百分比	Number,String	必传项，无默认值
stroke-width	圆弧的宽度	Number,String	5
radius	半径	Number,String	50
color	圆环进度条颜色	String , Object	'#fa2c19'
path-color	圆环轨道颜色	String	'#d9d9d9'
stroke-linecap	圆环进度条端点形状可选值为 square butt	String	'round'
clockwise	是否顺时针展示	Boolean	true

Slots

| 字段 | 说明 | |----- | ----- | | default | 自定义文字内容|