vue简易流程图

最新推荐文章于 2024-08-26 11:18:49 发布

镇冰

最新推荐文章于 2024-08-26 11:18:49 发布

阅读量720

点赞数

文章标签： vue.js 流程图

本文链接：https://blog.csdn.net/LYT_XLS/article/details/131481369

版权

在这里插入图片描述

<template>
  <div class="y-process-simple-wrapper">
    <div v-for="(item, index) in processData" :key="index" class="main" style="width: 100%;">
      <i v-if="index === 0" class="el-icon-caret-bottom triangle"></i>
      <div class="content">
        <div :class="`content-title ${item.type === 1 ? 'blue-bg' : 'yellow-bg'}`"><i :class="item.title === '发起人' ? 'el-icon-position' : (item.title === '确认人' ? 'el-icon-s-custom' : 'el-icon-s-check')"></i> {{item.title}}</div>
        <div class="content-text">{{item.context}}</div>
      </div>
      <div class="arrow-wrap">
        <div class="line"></div>
        <i v-if="index !== processData.length - 1" class="el-icon-caret-bottom triangle"></i>
      </div>
    </div>
    <i class="dot"></i>
    <div>流程结束</div>
  </div>
</template>

<script>
export default ({
  props: {
    title: {
      type: String,
      default: ''
    },
    processData: {
      type: Array,
      default: () => {
        return [{
          title: '发起人',
          type: 1,
          context: 'isahdlhwihwskehdxkjhdkhwouiejsjijisjijiwhiahsjhjhsjhjsh'
        }, {
          title: '确认人',
          type: 1,
          context: 'isahdlhwihwskehdxkjhwhiahsjhjhsjhjsh'
        }, {
          title: '复核人',
          type: 2,
          context: 'isahdlhwihwskehdxkjhdkhwouiejsjijisjijiwhiahsjhjhsjhjsh'
        }]
      }
    }
  }
})
</script>

<style lang="stylus">
.y-process-simple-wrapper
  width 100%
  display flex
  flex-direction column
  align-items center
  .main
    width 100%
    display flex
    flex-direction column
    align-items center
    .content
      width 50%
      border-radius 10px
      text-align left
      box-shadow 0 0 10px #ccc
      .content-title
        padding 10px
        color white
        border-radius 10px 10px 0 0
      .content-text
        padding 10px
    .arrow-wrap
      position relative
      .triangle
        position absolute
        bottom -8px
        right -11px
      .line
        width 3px
        height 42px
        background #909399
  .dot
    width 10px
    height 10px
    border-radius 50%
    background-color #909399
  .blue-bg
    background rgb(87, 106, 149)
  .yellow-bg
    background rgb(255, 148, 62)
  .triangle
    font-size 25px
    color #909399
</style>