0.0.4 • Published 12 months ago

lhep-steps v0.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
12 months ago

横版流程节点组件

完整demo演示

:::demo

<template>
  <div>
    <div style="margin-bottom: 30px;color: #5C5C5C">
      <el-checkbox v-model="usePopo">点击姓名唤起popo</el-checkbox>
      <el-checkbox v-model="changeColor">改变颜色</el-checkbox>
      <span style="font-size: 14px;margin-left: 30px">
        点击下一步：<el-button @click="handleNextStep">下一步</el-button>
      </span>
      <span style="font-size: 14px;margin-left: 30px">
        固定步骤六状态为：
        <el-select
          v-model="statusSelect"
          placeholder="请选择"
          clearable
          @change="statusChange"
          style="width: 100px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </span>
    </div>
    <lhep-steps
      :data="steps"
      :finish-color="finishColor"
      :wait-color="waitColor"
      :active-color="activeColor"
      :name-limit="nameLimit"
      :use-popo="usePopo"
      :active="active"
    >
      <lhep-step
        v-for="step in steps"
        :index-text="step.indexText"
        :step="step"
      />
      <lhep-step
        :index-text="customStep.indexText"
        :step="customStep"
      >
        <template #head="{data}">
          <el-link type="primary">自定义头部</el-link>
        </template>
        <template #description="{data}">
          <el-popover
            placement="bottom"
            title="标题"
            width="200"
            trigger="click"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
            <el-button slot="reference">自定义内容</el-button>
          </el-popover>
        </template>
      </lhep-step>
    </lhep-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      steps: [
        {email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人1', title: '步骤一'},
        {
          email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人2', title: '步骤二',
          nodes: [
            {email: ['wb.dongquan01@mesg.corp.netease.com','wb.dongquan01@mesg.corp.netease.com'],description:['审核人','审核人'], title: '步骤二'},
            {email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人4', title: '步骤二'},
          ]
        },
        {
          email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人5', title: '步骤三',
          nodes: [
            {placeholder: true},
            {email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人', title: '步骤五', crossSteps: 1, status: ''},
            {email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人', title: '步骤六', crossSteps: 3, status: '', indexText: '99'},
          ]
        },
        {
          email: ['wb.dongquan01@mesg.corp.netease.com','wb.dongquan01@mesg.corp.netease.com','wb.dongquan01@mesg.corp.netease.com'],
          description:['审核人','审核人','审核人'], title: '步骤七',
          nodes: [
            {email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人4', title: '步骤二'},
          ]
        },
        {email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人', title: '步骤八',
          nodes: [
            {email: 'wb.dongquan01@mesg.corp.netease.com',description:'审核人4', title: '步骤二'},
          ]
        },
        {email: ['wb.dongquan01@mesg.corp.netease.com','wb.dongquan01@mesg.corp.netease.com'],description:['审核人','审核人'], title: '步骤九' },
      ],
      customStep: {title: '自定义标题', description: '自定义内容', indexText: '99'},
      usePopo: true,
      changeColor: false,
      options: [
        { value: 'finish', label: '完成' },
        { value: 'process', label: '进行中' },
        { value: 'wait', label: '等待' }
      ],
      statusSelect: '',
      nameLimit: 2
    }
  },
  computed: {
    finishColor() {
      return this.changeColor ? '#BDE1CB' : '#90A3F4'
    },
    activeColor() {
      return this.changeColor ? '#595959' : '#FCC702'
    },
    waitColor() {
      return this.changeColor ? '#F0A716' : '#D7D9E0'
    }
  },
  methods: {
    handleNextStep() {
      this.active = this.active === 7 ? 0 : this.active + 1
    },
    statusChange() {
      this.steps[2].nodes[2].status = this.statusSelect
    }
  }
}

</script>

:::

普通用法

:::demo

<template>
  <div style="margin-top: 10px">
    <lhep-steps
      :data="steps"
      :active="1"
    >
      <lhep-step
        v-for="step in steps"
        :index-text="step.indexText"
        :step="step"
      />
    </lhep-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      steps: [
        {title: '节点', description: '描述文本'},
        {title: '节点', description: '描述文本'},
        {title: '节点', description: '描述文本', indexText: '0'},
      ]
    }
  }
}
</script>

:::

描述文本可点击唤起POPO

:::demo

<template>
  <div style="margin-top: 10px">
    <lhep-steps
      :data="steps"
      :active="1"
      :use-popo="true"
    >
      <lhep-step
        v-for="step in steps"
        :index-text="step.indexText"
        :step="step"
      />
    </lhep-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      steps: [
        {title: '节点', description: 'person1', email: 'wb.dongquan01@mesg.corp.netease.com'},
        {
          title: '节点', description: 'person2', 
          email: 'wb.dongquan01@mesg.corp.netease.com',
        },
        {title: '节点', description: ['person3','person4','person5','person6'], email: 'wb.dongquan01@mesg.corp.netease.com'},
      ]
    }
  }
}
</script>

:::

分支节点用法--单个节点的分支

:::demo

<template>
  <div style="margin-top: 10px">
    <lhep-steps
      :data="steps"
      :active="1"
    >
      <lhep-step
        v-for="step in steps"
        :step="step"
      />
    </lhep-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      steps: [
        {title: '节点', description: '描述文本'},
        {
          title: '节点', description: '描述文本',
          email: 'wb.dongquan01@mesg.corp.netease.com',
          nodes: [
            {title: '分支节点', description: '描述文本'},
            {title: '分支节点', description: '描述文本'},
          ]
        },
        {title: '节点', description: '描述文本'},
      ]
    }
  }
}
</script>

:::

分支节点用法--跨节点的分支

注意事项

  • 跨分支节点的数据中需要设置crossSteps字段，表示跨节点的数量
  • nodes数组中请按照跨节点数量从上到下显示，避免出现流程线交叉的情况（nodes数组中的数据则是与显示相反的顺序） :::demo
<template>
  <div style="margin-top: 10px">
    <lhep-steps
      :data="steps"
      :active="1"
    >
      <lhep-step
        v-for="step in steps"
        :step="step"
      />
    </lhep-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      steps: [
        {title: '主流程节点', description: '描述文本'},
        {
          title: '主流程节点', description: '描述文本',
          email: 'wb.dongquan01@mesg.corp.netease.com',
          nodes: [
            {title: '分支节点', description: '描述文本'},
            {title: '分支节点', description: '描述文本', crossSteps: 1},
          ]
        },
        {title: '主流程节点', description: '描述文本'},
        {title: '主流程节点', description: '描述文本'},
      ]
    }
  }
}
</script>

:::

分支节点用法--控制跨节点分支显示层级

在demo中可以看到，分支节点1需要显示在分支节点2上面，所以在主流程节点2对应的step数据的nodes字段中需要有一个占位数据{placeholder:true} :::demo

<template>
  <div style="margin-top: 10px">
    <lhep-steps
      :data="steps"
      :active="1"
    >
      <lhep-step
        v-for="step in steps"
        :step="step"
      />
    </lhep-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      steps: [
        {title: '主流程节点1', description: '描述文本'},
        {
          title: '主流程节点2', description: '描述文本',
          email: 'wb.dongquan01@mesg.corp.netease.com',
          nodes: [
            {placeholder: true},
            {title: '分支节点1', description: '描述文本', crossSteps: 2},
          ]
        },
        {
          title: '主流程节点3', 
          description: '描述文本',
          nodes: [
            {title: '分支节点2', description: '描述文本'},
          ]
        },
        {title: '主流程节点4', description: '描述文本'},
        {title: '主流程节点5', description: '描述文本'},
      ]
    }
  }
}
</script>

:::

使用说明

依赖

Vue 2.0.0+

安装

npm i lhep-steps -S --registry http://10.246.196.12:4873/

import lhepSteps from 'lhep-steps'

Vue.use(lhepSteps)

lhepSteps参数

参数名描述参数类型是否必填默认值包含字段
data节点数据ArrayYes step对象（详情见下表）
active设置当前激活步骤NumberNo0--
usePopo是否启用点击唤起POPO功能BooleanNofalse--
finishColor完成颜色StringNo'#90A3F4'--
activeColor进行中颜色StringNo'#FCC702'--
waitColor未开始颜色StringNo'#D7D9E0'--
nameLimit描述文本最大显示数量NumberNo3--
borderOffset跨节点分支的边框线间距 (可以为负数)NumberNo5--

lhepStep参数

nodes及node参数

lhepSteps插槽

插槽名称描述
default自定义内容

lhepStep插槽

插槽名称描述
title自定义标题
description自定义描述
head自定义头部

特别注意

  • 分支节点在第一列和最后一列时不显示
  • 分支节点的status默认跟随父节点，跨节点时注意手动设置status
  • 若需要显示多人，则description字段需修改为数组，且与email字段一一对应
componentinit
0.0.4

12 months ago

0.0.3

12 months ago