Skip to content

Commit

Permalink
add Steps
Browse files Browse the repository at this point in the history
  • Loading branch information
@icarusion
icarusion committed Jun 4, 2018
1 parent 80bb619 commit 62d9f74
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 0 deletions.
144 changes: 144 additions & 0 deletions src/code/steps.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
let code = {};

code.import = `
"usingComponents": {
"i-steps": "../../dist/steps/index",
"i-step": "../../dist/step/index"
}
`;
code.usage = `
基本用法
<i-steps>
<i-step status="finish">
<view slot="title">
已完成
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
<i-step status="process">
<view slot="title">
进行中
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
<i-step status="">
<view slot="title">
错误
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
</i-steps>
使用 icon 图标
<i-steps>
<i-step status="finish" icon="barrage">
<view slot="title">
已完成
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
<i-step status="process" icon="brush">
<view slot="title">
进行中
</view>
<view slot="content" icon="camera">
这里是该步骤的描述信息
</view>
</i-step>
<i-step icon="collection">
<view slot="title">
错误
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
</i-steps>
步骤进度
<i-steps current="{{current}}">
<i-step>
<view slot="title">
已完成
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
<i-step>
<view slot="title">
进行中
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
<i-step>
<view slot="title">
错误
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
</i-steps>
<i-button bindclick="handleClick">下一步</i-button>
垂直方向
<i-steps current="{{verticalCurrent}}" direction="vertical">
<i-step>
<view slot="title">
已完成
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
<i-step>
<view slot="title">
进行中
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
<i-step>
<view slot="title">
错误
</view>
<view slot="content">
这里是该步骤的描述信息
</view>
</i-step>
</i-steps>
`;

code.js = `
Page({
data : {
current : 2,
verticalCurrent : 2
},
handleClick () {
const addCurrent = this.data.current + 1;
const current = addCurrent > 2 ? 0 : addCurrent;
this.setData({
'current' : current
})
}
});
`;

export default code;
7 changes: 7 additions & 0 deletions src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,13 @@ const routers = [
},
component: (resolve) => require(['./views/components/page.vue'], resolve)
},
{
path: '/components/steps',
meta: {
title: '步骤条 Steps'
},
component: (resolve) => require(['./views/components/steps.vue'], resolve)
},
{
path: '*',
redirect: '/'
Expand Down
122 changes: 122 additions & 0 deletions src/views/components/steps.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<template>
<i-article>
<article>
<h1>Steps 步骤条</h1>
<Anchor title="概述" h2></Anchor>
<p>拆分某项流程的步骤，引导用户按流程完成任务。</p>
<Anchor title="使用指南" h2></Anchor>
<p>在 .json 中引入组件</p>
<i-code bg lang="json">{{ code.import }}</i-code>
<Anchor title="示例" h2></Anchor>
<i-code bg lang="html">{{ code.usage }}</i-code>
<br><br>
<i-code bg lang="js">{{ code.js }}</i-code>
<ad></ad>

<div class="api">
<Anchor title="API" h2></Anchor>
<Anchor title="Steps properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>current</td>
<td>当前步骤，从 0 开始计数</td>
<td>Number</td>
<td>-1</td>
</tr>
<tr>
<td>status</td>
<td>当前步骤的状态，可选值为 wait、process、finish、error</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>direction</td>
<td>步骤条的方向，可选值为 horizontal（水平）或 vertical（垂直）</td>
<td>String</td>
<td>horizontal</td>
</tr>
</tbody>
</table>
<Anchor title="Step properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>status</td>
<td>步骤的状态，可选值为 wait、process、finish、error，不设置时自动判断</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>标题</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>content</td>
<td>步骤的详细描述，可选</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>icon</td>
<td>步骤的图标，可选</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</article>
</i-article>
</template>
<script>
import iArticle from '../../components/article.vue';
import iCode from 'iCode';
import Demo from '../../components/demo.vue';
import Code from '../../code/steps';
import Anchor from '../../components/anchor.vue';
export default {
components: {
iArticle,
iCode,
Demo,
Anchor
},
data () {
return {
code: Code
}
}
}
</script>

0 comments on commit 62d9f74

Please sign in to comment.