element ui 使用步驟條組件實現時間列表組件

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 }}&nbsp;&nbsp;{{ 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>

完成此組件，參照了大佬的一個博客鏈接：
大佬的步驟條使用詳細說明