import{e as a,o as n,G as t}from"./vendor.bd251973.js";const p={class:"markdown-body"},l=t(`

CricleProgress \u8FDB\u5EA6\u6761

\u4ECB\u7ECD

\u5C55\u793A\u64CD\u4F5C\u6216\u4EFB\u52A1\u7684\u5F53\u524D\u8FDB\u5EA6\u3002

\u5B89\u88C5

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

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

\u57FA\u7840\u7528\u6CD5

<nut-circleprogress progress="10"></nut-circleprogress>

\u73AF\u5F62\u8FDB\u5EA6\u6761\u81EA\u5B9A\u4E49\u6837\u5F0F

<nut-circleprogress progress="50" :progress-option="progressOption"></nut-circleprogress>

\u73AF\u5F62\u8FDB\u5EA6\u6761\u81EA\u5B9A\u4E49\u5185\u5BB9

 <nut-circleprogress progress="50" :is-auto="true"></nut-circleprogress>

\u52A8\u6001\u6539\u53D8\u73AF\u5F62\u8FDB\u5EA6\u6761\u7684\u8FDB\u5EA6

  <nut-circleprogress :progress="percent" :progress-option="progressOption" :stroke-inner-width="strokeInnerWidth"> </nut-circleprogress>
  <nut-button type="primary"  @click="setReduceVal" >\u51CF\u5C11</nut-button>
  <nut-button type="primary"  @click="setAddVal">\u589E\u52A0</nut-button>

 setup() {
    const progressOption = reactive({
      radius: 50,
      strokeOutWidth: 10,
      backColor: '#d9d9d9',
      progressColor: 'red'
    });
    const percent = ref(50);
    const strokeInnerWidth = ref(10);
    const isAuto = ref(true);
    const setAddVal = () => {
      strokeInnerWidth.value = 10;
      if (percent.value >= 100) {
        return;
      }
      percent.value += 10;
    };
    const setReduceVal = () => {
      if (percent.value - 10 <= 0) {
        strokeInnerWidth.value = 0;
        percent.value = 0;
        return;
      }
      percent.value -= 10;
    };
    return {
      progressOption,
      isAuto,
      setAddVal,
      setReduceVal,
      percent
    };
  }

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
progress	\u767E\u5206\u6BD4	Number,String	\u5FC5\u4F20\u9879\uFF0C\u65E0\u9ED8\u8BA4\u503C
stroke-inner-width	\u5706\u5F27\u7684\u5BBD\u5EA6	Number,String	10
is-auto	\u662F\u5426\u81EA\u5B9A\u4E49\u5185\u5BB9\u663E\u793A\uFF08taro\u6682\u4E0D\u652F\u6301\uFF09	Boolean	false
progress-option	\u5916\u5706\u76F8\u5173\u53C2\u6570\u5BF9\u8C61,\u5176\u4E2D\u5305\u62EC\u534A\u5F84\uFF0C\u5BBD\u5EA6\uFF0C\u80CC\u666F\u989C\u8272\uFF0C\u8FDB\u5EA6\u8272\u503C	Object	{radius: 50,strokeOutWidth: 10, backColor: \u2018#d9d9d9\u2019,progressColor: \u2018red\u2019}

`,16),r=[l],u={setup(e,{expose:s}){return s({frontmatter:{}}),(o,h)=>(n(),a("div",p,r))}};export{u as default};