Process 流程条

流程条组件,用作流程条的进度展示

效果

使用方法

<template>
<div class="demo">

<lc-title title="流程条"></lc-title>
<category title="普通状态"></category>
<lc-process :processList="processList" :stepNormal="stepNormal"></lc-process>
<category title="错误状态"></category>
<lc-process :processList="processList1"></lc-process>
<category title="取消状态"></category>
<lc-process :processList="processList2"></lc-process>
<category title="金钱状态"></category>
<lc-process :processList="processList3"></lc-process>

</div>
</template>
<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
components: { LcTitle, Category },
data(){
return {
stepNormal:"https://lightingui.lightyy.com/images/stars/star1.png",
processList: [
{
name: "申请受理",
data: "09-20 星期一 18:00",
state: ""
},
{
name: "份额确认",
data: "09-22 星期三",
state: "successDone"
},
{
name: "份额确认2",
data: "09-22 星期五",
state: "success"
}
],
processList1: [
{
name: "申请受理",
data: "09-20 星期一 18:00",
state: ""
},
{
name: "份额确认",
data: "09-22 星期三",
state: "error"
}
],
processList2: [
{
name: "申请受理",
data: "09-20 星期一 18:00",
state: ""
},
{
name: "份额确认",
data: "09-22 星期三",
state: "cancel"
}
],
processList3: [
{
name: "申请受理",
data: "09-20 星期一 18:00",
state: ""
},
{
name: "份额确认",
data: "09-22 星期三",
state: "money"
}
],

}
},
methods:{

}
}
</script>
<style scoped>
</style>

可配置参数

Prop Type Required Default Description
processList Array Y [] 流程内容列表
stepNormal String N 初始状态图标
stepSuccess String N 将要成功状态图标
stepSuccessDone String N 成功状态图标
stepError String N 错误状态图标
stepCancel String N 取消状态图标
stepMoney String N 金钱未成状态图标
stepMoneyDone String N 金钱完成状态图标
  • *state可选合法值 :normal/(初始)、success(将要成功)、successDone(成功)、error(错误)、cancel(取消)、money(金钱未完成)、moneyDone(金钱完成)
  • *normal/只适用于第一个状态;别的状态不能作为第一个状态