import{o as t,a,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},d=n(`

Progress \u8FDB\u5EA6\u6761

\u4ECB\u7ECD

\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u7684\u5F53\u524D\u8FDB\u5EA6\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

import { createApp } from 'vue';
import { Progress } from 'vant';

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

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4E3A\u84DD\u8272\uFF0C\u4F7F\u7528 percentage \u5C5E\u6027\u6765\u8BBE\u7F6E\u5F53\u524D\u8FDB\u5EA6\u3002

<van-progress :percentage="50" />

\u7EBF\u6761\u7C97\u7EC6

\u901A\u8FC7 stroke-width \u53EF\u4EE5\u8BBE\u7F6E\u8FDB\u5EA6\u6761\u7684\u7C97\u7EC6\u3002

<van-progress :percentage="50" stroke-width="8" />

\u7F6E\u7070

\u8BBE\u7F6E inactive \u5C5E\u6027\u540E\u8FDB\u5EA6\u6761\u5C06\u7F6E\u7070\u3002

<van-progress inactive :percentage="50" />

\u6837\u5F0F\u5B9A\u5236

\u53EF\u4EE5\u4F7F\u7528 pivot-text \u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0Ccolor \u5C5E\u6027\u81EA\u5B9A\u4E49\u8FDB\u5EA6\u6761\u989C\u8272\u3002

<van-progress pivot-text="\u6A59\u8272" color="#f2826a" :percentage="25" />
<van-progress pivot-text="\u7EA2\u8272" color="#ee0a24" :percentage="50" />
<van-progress
  :percentage="75"
  pivot-text="\u7D2B\u8272"
  pivot-color="#7232dd"
  color="linear-gradient(to right, #be99ff, #7232dd)"
/>

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
percentage\u8FDB\u5EA6\u767E\u5206\u6BD4number | string0
stroke-width\u8FDB\u5EA6\u6761\u7C97\u7EC6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxnumber | string4px
color\u8FDB\u5EA6\u6761\u989C\u8272string#1989fa
track-color\u8F68\u9053\u989C\u8272string#e5e5e5
pivot-text\u8FDB\u5EA6\u6587\u5B57\u5185\u5BB9string\u767E\u5206\u6BD4
pivot-color\u8FDB\u5EA6\u6587\u5B57\u80CC\u666F\u8272string\u540C\u8FDB\u5EA6\u6761\u989C\u8272
text-color\u8FDB\u5EA6\u6587\u5B57\u989C\u8272stringwhite
inactive\u662F\u5426\u7F6E\u7070booleanfalse
show-pivot\u662F\u5426\u663E\u793A\u8FDB\u5EA6\u6587\u5B57booleantrue

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type { ProgressProps, ProgressInstance } from 'vant';

ProgressInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

import { ref } from 'vue';
import type { ProgressInstance } from 'vant';

const progressRef = ref<ProgressInstance>();

progressRef.value?.resize();

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-progress-height4px-
--van-progress-colorvar(--van-primary-color)-
--van-progress-inactive-colorvar(--van-gray-5)-
--van-progress-background-colorvar(--van-gray-3)-
--van-progress-pivot-padding0 5px-
--van-progress-pivot-text-colorvar(--van-white)-
--van-progress-pivot-font-sizevar(--van-font-size-xs)-
--van-progress-pivot-line-height1.6-
--van-progress-pivot-background-colorvar(--van-primary-color)-
`,13),r=[d],h={__name:"README.zh-CN",setup(p,{expose:s}){return s({frontmatter:{}}),(l,c)=>(t(),a("div",e,r))}};export{h as default};