描述ElementUI中使用竖向列表 elementui列表组件

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

最近在写几个小组件，嗯，组件的编写比搭建页面和渲染数据要难一些，难就难在思想，这个东西看不见摸不着，得练习，得思考。

时间列表组件，其实不用steps组件也是可以实现的，我一开始就是自己搭建的页面，css代码一大堆，也能显示同样的页面。

先来分析一下页面：

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>