| 1 |
- import{e as s,o as a,G as t}from"./vendor.6bc94963.js";const n={class:"markdown-body"},l=[t('<h1>Steps 步骤条</h1><h3>介绍</h3><p>拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-comment">//vue</span>\n<span class="hljs-keyword">import</span> { Steps, Step } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-comment">//taro</span>\n<span class="hljs-keyword">import</span> { Steps, Step } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui-taro'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Steps);\napp.use(Step);\n</code></pre><h2>代码演示</h2><h3>基本用法</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-steps</span> <span class="hljs-attr">current</span>=<span class="hljs-string">"1"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"进行中"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"未开始"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"未开始"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"未开始"</span>></span>4<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-steps</span>></span>\n</code></pre><h3>标题和描述信息</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-steps</span> <span class="hljs-attr">current</span>=<span class="hljs-string">"2"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"已完成"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"步骤描述"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"nutui-iconfont nut-icon-wanshangshide"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"进行中"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"步骤描述"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"未开始"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"步骤描述"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-steps</span>></span>\n</code></pre><h3>自定义图标</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-steps</span> <span class="hljs-attr">current</span>=<span class="hljs-string">"1"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"已完成"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"nutui-iconfont nut-icon-wanshangshide"</span> <span class="hljs-attr">status</span>=<span class="hljs-string">"error"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"进行中"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"nutui-iconfont nut-icon-notice"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span> \n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nut-step-wait"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"未开始"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"nutui-iconfont nut-icon-notice"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-steps</span>></span>\n</code></pre><h3>竖向步骤条</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-steps</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"vertical"</span> <span class="hljs-attr">current</span>=<span class="hljs-string">"2"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"已完成"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"nutui-iconfont nut-icon-wanshangshide"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"您的订单已经打包完成，商品已发出"</span> ></span>1<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"进行中"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"您的订单正在配送途中"</span> ></span>2<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"未开始"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-steps</span>></span>\n</code></pre><h3>点状步骤和垂直方向</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-steps</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"vertical"</span> <span class="hljs-attr">progress-dot</span> <span class="hljs-attr">current</span>=<span class="hljs-string">"2"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"已完成"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"您的订单已经打包完成，商品已发出"</span> ></span>1<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"进行中"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"您的订单正在配送途中"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"未开始"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">nut-step</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-steps</span>></span>\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)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
|
