重读vue电商网站20之使用Timeline 时间线

    可视化地呈现时间流信息。

由于 vue-cli-plugin-element 最后更新时间是 2019年1月，而 element-ui 中 Timeline 时间线更新是在 3月份，因此我们没有办法直接进行引用。因此，我们直接通过手动导入的方式。

然后，我们打开 element.js，进行导入

Js

    import Timeline from './timeline/index'
    import TimelineItem from './timeline-item/index'

同时，我们也需要导入我们的 css 样式

Code

    <style lang="less" scoped>
    @import '../../plugins/timeline/timeline.css';
    @import '../../plugins/timeline-item/timeline-item.css';
    .el-cascader{
    width: 100%;
    }
    </style>

Js

    <!-- 展示物流进度的对话框 -->
    <el-dialog title="物流进度" :visible.sync="progressVisible" width="45%" @close="addressDialogClosed">
    <el-timeline>
    <el-timeline-item
    v-for="(activity, index) in progressInfo"
    :key="index"
    :timestamp="activity.time">
    {{activity.context}}
    </el-timeline-item>
    </el-timeline>
    </el-dialog>