項目中elementui時間線的使用~✔✔

Vue項目項目中經常會遇到事件線的功能Timeline，比如說快遞跟蹤功能等。element.js 時間線的使用，先來看效果圖

是因爲element2.6.0之前的版本不支持時間線組件了。所有下載安裝比較麻煩。這裏推薦使用本地組件：直接放在pluginis目錄下，然後引入就可以

timeline文件和timeline-item文件我放在的博客文件夾裏 。

（1）在使用時間線的文件中，導入時間線（在引入UI組件庫的element.js中）

// 導入時間線 （from後面是自己的路徑）
import Timeline from './timeline/index'
import TimelineItem from './timeline-item/index'
// 在全局註冊
Vue.use(Timeline)
Vue.use(TimelineItem)

（2）html標籤裏使用

<!--icon和color根據後臺返回的數據來控制或渲染，這裏直接了，沒有後臺返回數據-->
    <!--    展示物流進度對話框-->
    <el-dialog title="物流進度"  :visible.sync="progressVisible"  width="50%">
      <!--      時間線進度線-->
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in progressInfo"
          :key="index" :timestamp="activity.time"
          icon='el-icon-check' color='#67C23A'>
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

data:

code（固定數據）

 // 時間線
      activities: [
        {
          content: '快件已簽收 簽收人：家人 感謝使用圓通快遞 期待再次爲您服務',
          timestamp: '2018-04-15 13:07:40',
        },
        {
          content:
            '[北京市]北京海淀育新小區營業點派件員 順豐速運 95338正在爲您派件',
          timestamp: '2018-05-10 07:32:00',
        },
        {
          content: '快件到達 [北京海淀育新小區營業點]',
          timestamp: '2018-05-10 08:23:00',
        },
        {
          content:
            '快件在[北京順義集散中心]已裝車,準備發往 [北京海淀育新小區營業點]',
          timestamp: '2018-05-10 02:03:00',
        },
        {
          content: '快件到達 [北京順義集散中心]',
          timestamp: '2018-05-09 23:05:00',
        },
        {
          content: '快件在[北京寶勝營業點]已裝車,準備發往 [北京順義集散中心]',
          timestamp: '2018-05-09 21:21:00',
        },
        {
          content: '商品已經下單',
          timestamp: '2018-05-08 21:36:04',
        },
      ],

 後臺獲取數據：

    async showProgressBox() {
      const {data: res} = await this.$http.get('/kuaidi/804909574412544580')
      if (res.meta.status !== 200) {
        return this.$message.error('獲取物流信息失敗！')
      }
      this.$message.success('獲取物流信息成功！')
      this.progressInfo = res.data
      this.progressVisible = true
      console.log(this.progressInfo)
    }
注：progressInfo，progressVisibledata裏定義

css樣式：

<style lang="less" scoped>
@import '../../plugins/timeline/timeline.css';
@import '../../plugins/timeline-item/timeline-item.css';
</style>

最終效果：