element ui 使用步骤条组件实现时间列表组件

小咪咪 2021-08-29 19:50 1498阅读 0赞

#### element ui 中的步骤条组件——steps ####

最近在写几个小组件，嗯，组件的编写比搭建页面和渲染数据要难一些，难就难在思想，这个东西看不见摸不着，得练习，得思考。  
时间列表组件，其实不用steps组件也是可以实现的，我一开始就是自己搭建的页面，css代码一大堆，也能显示同样的页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
先来分析一下页面：

1.  顶部标题栏
2.  内容区分左右两栏，左侧为头像，右侧为内容信息。
3.  右侧内容信息分为昵称 创建时间 内容区，有些带有图片及查看文件按钮等。

分析完成后，就开始布局组件吧。

用到的知识点列举如下：

1.  步骤条竖向展示：`只需要在el-steps元素中设置direction属性为vertical即可。`
2.  `active` 设置当前激活步骤 `number`类型
3.  `process-status` 设置当前步骤的状态 `string`类型
4.  `title` 标题 `string`类型
5.  `description` 描述性文字 `string`类型
6.  `status` 设置当前步骤的状态，不设置则根据 steps 确定状态 `wait / process / finish / error / success`
7.  可以使用插槽的几个属性;`icon 图标` `title 标题` `description 描述性文字`

//el-dialog 是弹窗组件
    //visible.sync同步展示与不展示弹窗
    //append-to-body是否添加到页面body中
    //width设置宽度
    <el-dialog :visible.sync="show" :append-to-body="true" class="dialog" width="1000px">
    //el-row 一列内容，可以包含很多行，el-col就是行内容展示标签 span是分区，一共24个区，占几个区，写多少数字
        <el-row class="row-bg">
        //align="center" 内容居中
          <el-col :span="24" align="center" class="title">
            { {  title }}
          </el-col>
          <el-col :span="24" align="center" class="title">
          // active 设置当前激活步骤
          // finish-status 设置结束步骤的状态
          // direction 步骤条为竖直方向
            <el-steps :active="active" finish-status="success" direction="vertical">
            //el-steps 中可以有多个 el-step
              <el-step v-for="item in remarksList">
              //图标插槽的使用方法，就是添加一个template标签，然后添加一个属性为slot="icon"
                <template slot="icon">
                //给图标设置尺寸可以通过行间样式的方式进行添加
                  <img :src="item.avatar" alt="用户头像" style="width:60px;height:60px;border-radius: 50%">
                </template>
                //描述内容插槽使用方法，就是添加一个template标签，然后添加一个属性为slot="description"
                <template slot="description">
                  <div class="step-row">
                    <el-col :span="24" class="name">
                    //展示昵称 创建时间
                      <div>{ {  item.nickName }}  { {  item.createTime }}</div>
                      //如果存在 fileUrl这个属性，则可以显示“查看文件”按钮
                      <el-button v-if="item.fileUrl">
                        <a :href="item.fileUrl" target="_blank">查看文件</a>
                      </el-button>
                    </el-col>
                    <el-col :span="24" class="content">
                      <div>{ {  item.content }}</div>
                       //如果存在 fileUrl这个属性，则可以显示“图片”
                      <div v-if="item.fileUrl" class="img">
                        <img :src="item.fileUrl" alt="备注主图">
                      </div>
                    </el-col>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </el-col>
        </el-row>
      </el-dialog>
    
    
    //样式部分
    <style lang="scss">
      .row-bg{ 
        height:600px;
        overflow-y: auto;
      }
      .title{ 
        margin-bottom:30px;
        font-size:20px;
        font-weight: bold;
      }
      .step-row{ 
        margin-left:30px;
        width:800px;
      }
      .name{ 
        display: flex;
        justify-content: space-between;
        font-size:16px;
        color:#424242;
      }
      .content{ 
        margin:10px auto;
        border:1px solid #efefef;
        padding:20px;
        box-sizing: border-box;
        line-height: 20px;
        color:#424242;
        .img{ 
          width:100%;
          margin:10px auto;
          img{ 
            width:100%;
          }
        }
      }
      img.left{ 
        width:60px;
        height:60px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        z-index:1;
        border:1px solid red;
      }
    </style>

完成此组件，参照了大佬的一个博客链接：  
[大佬的步骤条使用详细说明][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/6993bc8fd9b24de9baeff0ca1536a5eb.png
[Link 1]: https://blog.csdn.net/M612a34/article/details/84572689