| 1 |
- import{c as t,o as n,C as u}from"./vendor.0d0a34e4.js";const o={class:"markdown-body"},e=u('<h1>Steps 步骤条</h1><h3>介绍</h3><p>拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\n//vue\nimport { Steps } from '@nutui/nutui';\n//taro\nimport { Steps } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Steps);\n</code></pre><h2>代码演示</h2><h3>基本用法</h3><pre><code class="language-html"><nut-steps current="1">\n <nut-step title="进行中">1</nut-step>\n <nut-step title="未开始">2</nut-step>\n <nut-step title="未开始">3</nut-step>\n <nut-step title="未开始">4</nut-step>\n</nut-steps>\n</code></pre><h3>标题和描述信息</h3><pre><code class="language-html"><nut-steps current="2">\n <nut-step title="已完成" content="步骤描述" icon="nutui-iconfont nut-icon-wanshangshide">1</nut-step>\n <nut-step title="进行中" content="步骤描述">2</nut-step>\n <nut-step title="未开始" content="步骤描述">3</nut-step>\n</nut-steps>\n</code></pre><h3>自定义图标</h3><pre><code class="language-html"><nut-steps current="1">\n <nut-step title="已完成" icon="nutui-iconfont nut-icon-wanshangshide" status="error">1</nut-step>\n <nut-step title="进行中" icon="nutui-iconfont nut-icon-notice">2</nut-step> \n <nut-step class="nut-step-wait" title="未开始" icon="nutui-iconfont nut-icon-notice">3</nut-step>\n</nut-steps>\n</code></pre><h3>竖向步骤条</h3><pre><code class="language-html"><nut-steps direction="vertical" current="2">\n <nut-step title="已完成" icon="nutui-iconfont nut-icon-wanshangshide" content="您的订单已经打包完成，商品已发出" >1</nut-step>\n <nut-step title="进行中" content="您的订单正在配送途中" >2</nut-step>\n <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>\n</nut-steps>\n</code></pre><h3>点状步骤和垂直方向</h3><pre><code class="language-html"><nut-steps direction="vertical" progress-dot current="2">\n <nut-step title="已完成" content="您的订单已经打包完成，商品已发出" >1</nut-step>\n <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>\n <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>\n</nut-steps>\n</code></pre><h2>API</h2><h3>Props</h3><h4>nut-steps</h4><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>direction</td><td>显示方向，<code>horizontal</code>,<code>vertical</code></td><td>String</td><td>‘horizontal’</td></tr><tr><td>current</td><td>当前所在的步骤</td><td>Number、String</td><td>‘0’</td></tr><tr><td>progress-dot</td><td>点状步骤条</td><td>Boolean</td><td>false</td></tr></tbody></table><h4>nut-step</h4><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>流程步骤的标题</td><td>String</td><td>步骤</td></tr><tr><td>content</td><td>流程步骤的描述性文字(支持 html 结构)</td><td>String</td><td>步骤描述</td></tr><tr><td>icon</td><td>图标</td><td>String</td><td>null</td></tr></tbody></table>',22),s={setup:u=>(u,s)=>(n(),t("div",o,[e]))};export default s;
|
