Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: 00a0c8ebca
Branches Tags
nutui
/
3.1.9
/
doc.a2acae8a.js

doc.a2acae8a.js 10 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536 
  1. import{e as a,o as t,G as n}from"./vendor.bd251973.js";const l={class:"markdown-body"},p=n(`<h1>Steps \u6B65\u9AA4\u6761</h1><h3>\u4ECB\u7ECD</h3><p>\u62C6\u5206\u5C55\u793A\u67D0\u9879\u6D41\u7A0B\u7684\u6B65\u9AA4\uFF0C\u5F15\u5BFC\u7528\u6237\u6309\u6D41\u7A0B\u5B8C\u6210\u4EFB\u52A1\u6216\u5411\u7528\u6237\u5C55\u793A\u5F53\u524D\u72B6\u6001\u3002</p><h3>\u5B89\u88C5</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    2. 

  2. <span class="hljs-comment">//vue</span>
    3. 

  3. <span class="hljs-keyword">import</span> { Steps, Step } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
    4. 

  4. <span class="hljs-comment">//taro</span>
    5. 

  5. <span class="hljs-keyword">import</span> { Steps, Step  } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;
    6. 

  6. 

  7. <span class="hljs-keyword">const</span> app = createApp();
    8. 

  8. app.use(Steps);
    9. 

  9. app.use(Step);
    10. 

  10. </code></pre><h2>\u4EE3\u7801\u6F14\u793A</h2><h3>\u57FA\u672C\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-steps</span> <span class="hljs-attr">current</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>
    11. 

  11.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8FDB\u884C\u4E2D&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    12. 

  12.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u672A\u5F00\u59CB&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    13. 

  13.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u672A\u5F00\u59CB&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    14. 

  14.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u672A\u5F00\u59CB&quot;</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    15. 

  15. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-steps</span>&gt;</span>
    16. 

  16. </code></pre><h3>\u6807\u9898\u548C\u63CF\u8FF0\u4FE1\u606F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-steps</span> <span class="hljs-attr">current</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
    17. 

  17.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5DF2\u5B8C\u6210&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u6B65\u9AA4\u63CF\u8FF0&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;nutui-iconfont nut-icon-wanshangshide&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    18. 

  18.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8FDB\u884C\u4E2D&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u6B65\u9AA4\u63CF\u8FF0&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    19. 

  19.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u672A\u5F00\u59CB&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u6B65\u9AA4\u63CF\u8FF0&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    20. 

  20. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-steps</span>&gt;</span>
    21. 

  21. </code></pre><h3>\u81EA\u5B9A\u4E49\u56FE\u6807</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-steps</span> <span class="hljs-attr">current</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>
    22. 

  22.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5DF2\u5B8C\u6210&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;nutui-iconfont nut-icon-wanshangshide&quot;</span> <span class="hljs-attr">status</span>=<span class="hljs-string">&quot;error&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    23. 

  23.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8FDB\u884C\u4E2D&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;nutui-iconfont nut-icon-notice&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span> 
    24. 

  24.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nut-step-wait&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u672A\u5F00\u59CB&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;nutui-iconfont nut-icon-notice&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    25. 

  25. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-steps</span>&gt;</span>
    26. 

  26. </code></pre><h3>\u7AD6\u5411\u6B65\u9AA4\u6761</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-steps</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;vertical&quot;</span> <span class="hljs-attr">current</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
    27. 

  27.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5DF2\u5B8C\u6210&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;nutui-iconfont nut-icon-wanshangshide&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u6253\u5305\u5B8C\u6210\uFF0C\u5546\u54C1\u5DF2\u53D1\u51FA&quot;</span> &gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    28. 

  28.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8FDB\u884C\u4E2D&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u60A8\u7684\u8BA2\u5355\u6B63\u5728\u914D\u9001\u9014\u4E2D&quot;</span> &gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    29. 

  29.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u672A\u5F00\u59CB&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u6536\u8D27\u5730\u5740\u4E3A\uFF1A\u5317\u4EAC\u5E02\u7ECF\u6D4E\u6280\u672F\u5F00\u53D1\u533A\u79D1\u521B\u5341\u4E00\u885718\u53F7\u9662\u4EAC\u4E1C\u5927\u53A6&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    30. 

  30. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-steps</span>&gt;</span>
    31. 

  31. </code></pre><h3>\u70B9\u72B6\u6B65\u9AA4\u548C\u5782\u76F4\u65B9\u5411</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-steps</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;vertical&quot;</span> <span class="hljs-attr">progress-dot</span> <span class="hljs-attr">current</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
    32. 

  32.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5DF2\u5B8C\u6210&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u6253\u5305\u5B8C\u6210\uFF0C\u5546\u54C1\u5DF2\u53D1\u51FA&quot;</span> &gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    33. 

  33.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8FDB\u884C\u4E2D&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u60A8\u7684\u8BA2\u5355\u6B63\u5728\u914D\u9001\u9014\u4E2D&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    34. 

  34.   <span class="hljs-tag">&lt;<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u672A\u5F00\u59CB&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u6536\u8D27\u5730\u5740\u4E3A\uFF1A\u5317\u4EAC\u5E02\u7ECF\u6D4E\u6280\u672F\u5F00\u53D1\u533A\u79D1\u521B\u5341\u4E00\u885718\u53F7\u9662\u4EAC\u4E1C\u5927\u53A6&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">nut-step</span>&gt;</span>
    35. 

  35. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-steps</span>&gt;</span>
    36. 

  36. </code></pre><h2>API</h2><h3>Props</h3><h4>nut-steps</h4><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>direction</td><td>\u663E\u793A\u65B9\u5411\uFF0C<code>horizontal</code>,<code>vertical</code></td><td>String</td><td>\u2018horizontal\u2019</td></tr><tr><td>current</td><td>\u5F53\u524D\u6240\u5728\u7684\u6B65\u9AA4</td><td>Number\u3001String</td><td>\u20180\u2019</td></tr><tr><td>progress-dot</td><td>\u70B9\u72B6\u6B65\u9AA4\u6761</td><td>Boolean</td><td>false</td></tr></tbody></table><h4>nut-step</h4><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6D41\u7A0B\u6B65\u9AA4\u7684\u6807\u9898</td><td>String</td><td>\u6B65\u9AA4</td></tr><tr><td>content</td><td>\u6D41\u7A0B\u6B65\u9AA4\u7684\u63CF\u8FF0\u6027\u6587\u5B57(\u652F\u6301 html \u7ED3\u6784)</td><td>String</td><td>\u6B65\u9AA4\u63CF\u8FF0</td></tr><tr><td>icon</td><td>\u56FE\u6807</td><td>String</td><td>null</td></tr></tbody></table>`,22),c=[p],u={setup(h,{expose:s}){return s({frontmatter:{}}),(o,r)=>(t(),a("div",l,c))}};export{u as default};
    37.