2020 Vue 基于Element-UI开发手动导入并使用Timeline组件（附组件文件）查看快递信息

最新推荐文章于 2024-07-30 17:23:03 发布

一百个Chocolate

最新推荐文章于 2024-07-30 17:23:03 发布

阅读量8k

点赞数 10

分类专栏： Vue全家桶系列文章标签： vue git react python java

原则上允许部分内容转载，转载请注明原文章地址！

本文链接：https://blog.csdn.net/weixin_42429718/article/details/104077944

版权

文章目录

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于Timeline组件使用，由于element-ui与vue-cli-plugin-element更新冲突问题，导致我们不能直接通过导入的方式使用该组件，于是我们采用手动导入的方式来解决这个问题

2、导入与配置

将两个关键文件夹放入plugins中

在这里插入图片描述

提供文件：

在这里插入图片描述
链接：https://pan.baidu.com/s/1orB10hFqMRfzD_akmP3hBA
提取码：cqgc

链接：https://pan.baidu.com/s/1YjguGpoRJj64vwFqYt3lGQ
提取码：ovlg

实现效果:

在这里插入图片描述

实现过程：

先在element.js中导入Timeline组件并注册全局可用组件
在这里插入图片描述

// 导入组件
import Timeline from './timeline/index.js'
import TimelineItem from './timeline-item/index.js'
// 注册全局可用组件`https://element.eleme.cn/#/zh-CN/component/timeline`
Vue.use(Timeline);
Vue.use(TimelineItem);

推荐查看官方文档——Element组件中Timeline使用

<el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {
   {
   activity.content}}
    </el-timeline-item>
  </el-timeline>

在这里插入图片描述

在这里插入图片描述
此时，我们还未导入样式，如下图所示，那么在style样式中导入一下：

<style lang='less' scoped>
// 导入timeline相样式
@import '../../plugins/timeline/timeline.css';
@import '../../plugins/timeline-item/timeline-item.css';

.el-cascader{
   
    width: 100%;
}
</style>

导入样式后我们的界面就变得好看多了
在这里插入图片描述

项目源码：

<!--  -->
<template>
    <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-input placeholder="请输入内容"  clearable ></