重读vue电商网站20之使用Timeline 时间线
  TEZNKK3IfmPf 2024年07月27日 72 0

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

重读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>
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年07月27日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年08月09日   63   0   0 javascript前端
  I7JaHrFMuDsU   2024年08月09日   55   0   0 vue用户
TEZNKK3IfmPf