mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
2 lines
14 KiB
JavaScript
2 lines
14 KiB
JavaScript
import{_ as e,E as d,c as h,o as l,aR as n,I as i,a as t,w as a}from"./chunks/framework.C7RrxATG.js";const b=JSON.parse('{"title":"Circle 环形进度条","description":"","frontmatter":{},"headers":[],"relativePath":"component/circle.md","filePath":"component/circle.md","lastUpdated":1762249100000}'),k={name:"component/circle.md"},p=n('<h1 id="circle-环形进度条" tabindex="-1">Circle 环形进度条 <a class="header-anchor" href="#circle-环形进度条" aria-label="Permalink to "Circle 环形进度条""></a></h1><p>圆环形的进度条组件，支持进度渐变动画。</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to "基础用法""></a></h2><p>通过<code>v-model</code>表示进度条的当前进度，<code>text</code>属性控制进度条中间文字内容。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"current"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"`进度：${current}%`"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> current</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="宽度控制" tabindex="-1">宽度控制 <a class="header-anchor" href="#宽度控制" aria-label="Permalink to "宽度控制""></a></h2><p>通过<code>strokeWidth</code>属性来控制进度条宽度，默认<code>10px</code>。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"current"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :strokeWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"15"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="颜色定制" tabindex="-1">颜色定制 <a class="header-anchor" href="#颜色定制" aria-label="Permalink to "颜色定制""></a></h2><p>通过<code>color</code>属性控制进度条颜色，默认<code>#1C64FD</code>，通过<code>layerColor</code>属性控制进度条轨道颜色，默认<code>#EBEEF5</code>。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"current"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"#1C64FD"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layer-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"#EBEEF5"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="渐变色" tabindex="-1">渐变色 <a class="header-anchor" href="#渐变色" aria-label="Permalink to "渐变色""></a></h2><p><code>color</code>属性支持传入对象格式来定义渐变色。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"current"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"gradientColor"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> gradientColor</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>\n<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '0%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ffd01e'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ee0a24'</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="进度条展开方向" tabindex="-1">进度条展开方向 <a class="header-anchor" href="#进度条展开方向" aria-label="Permalink to "进度条展开方向""></a></h2><p>通过<code>clockwise</code>属性控制进度条展开方向，<code>clockwise</code>为<code>false</code>时，进度会从逆时针方向开始。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"current"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :clockwise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"false"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="大小定制" tabindex="-1">大小定制 <a class="header-anchor" href="#大小定制" aria-label="Permalink to "大小定制""></a></h2><p>通过<code>size</code>属性控制进度条圆环直径，默认<code>100px</code>。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"current"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"300"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-circle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to "Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td><code>v-model</code> / <code>modelValue</code></td><td>当前进度</td><td>number</td><td>-</td><td><code>0</code></td><td>0.1.19</td></tr><tr><td><code>customClass</code></td><td>自定义class</td><td>string</td><td>-</td><td>-</td><td>0.1.19</td></tr><tr><td><code>customStyle</code></td><td>自定义style</td><td>string</td><td>-</td><td>-</td><td>0.1.19</td></tr><tr><td><code>size</code></td><td>圆环直径，默认单位为 px</td><td>number</td><td>-</td><td><code>100</code></td><td>0.1.19</td></tr><tr><td><code>color</code></td><td>进度条颜色</td><td>string / Record<string, string></td><td>-</td><td><code>#4d80f0</code></td><td>0.1.19</td></tr><tr><td><code>layerColor</code></td><td>轨道颜色</td><td>string</td><td>-</td><td><code>#EBEEF5</code></td><td>0.1.19</td></tr><tr><td><code>fill</code></td><td>填充颜色</td><td>string</td><td>-</td><td><code>#ffffff</code></td><td>0.1.19</td></tr><tr><td><code>speed</code></td><td>动画速度（单位为 rate/s）</td><td>number</td><td>-</td><td><code>50</code></td><td>0.1.19</td></tr><tr><td><code>text</code></td><td>文字</td><td>string</td><td>-</td><td>-</td><td>0.1.19</td></tr><tr><td><code>strokeWidth</code></td><td>进度条宽度，单位px</td><td>number</td><td>-</td><td><code>10</code></td><td>0.1.19</td></tr><tr><td><code>strokeLinecap</code></td><td>进度条端点的形状</td><td>string</td><td><code>butt</code> / <code>round</code> / <code>square</code></td><td><code>round</code></td><td>0.1.19</td></tr><tr><td><code>clockwise</code></td><td>是否顺时针增加</td><td>boolean</td><td>-</td><td><code>true</code></td><td>0.1.19</td></tr></tbody></table><h2 id="circle-外部样式类" tabindex="-1">Circle 外部样式类 <a class="header-anchor" href="#circle-外部样式类" aria-label="Permalink to "Circle 外部样式类""></a></h2><table tabindex="0"><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式</td><td>-</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to "源代码""></a></h2>',27);function r(o,c,E,g,u,y){const s=d("ExternalLink");return l(),h("div",null,[p,i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/circle"},{default:a(()=>[t("文档")]),_:1}),t(" • "),i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-circle"},{default:a(()=>[t("组件")]),_:1})])}const m=e(k,[["render",r]]);export{b as __pageData,m as default};
|