import{e as t,o as e,G as r}from"./vendor.e1f99099.js";const o={class:"markdown-body"},n=[r('

CricleProgress 进度条

介绍

展示操作或任务的当前进度。

安装

import { createApp } from 'vue';\n//vue\nimport { CirecleProgress } from '@nutui/nutui';\n//taro\nimport { CirecleProgress } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(CirecleProgress);\n\n

代码示例

基础用法

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

环形进度条自定义样式

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

环形进度条自定义内容

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

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

  <nut-circleprogress :progress="percent" :progress-option="progressOption" :stroke-inner-width="strokeInnerWidth"> </nut-circleprogress>\n  <nut-button type="primary"  @click="setReduceVal" >减少</nut-button>\n  <nut-button type="primary"  @click="setAddVal">增加</nut-button>\n

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

Prop

字段	说明	类型	默认值
progress	百分比	Number,String	必传项，无默认值
stroke-inner-width	圆弧的宽度	Number,String	10
is-auto	是否自定义内容显示（taro暂不支持）	Boolean	false
progress-option	外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值	Object	{radius: 50,strokeOutWidth: 10, backColor: ‘#d9d9d9’,progressColor: ‘red’}

',17)],s={setup:r=>(r,s)=>(e(),t("div",o,n))};export{s as default};