前端学习（2699）：重读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-itemv-for="(activity, index) in progressInfo":key="index":timestamp="activity.time">{{activity.context}}</el-timeline-item></el-timeline></el-dialog>

最终实现效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/414879.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android 高德地图根据地址获取经纬度，计算两个坐标的距离

Android 高德地图根据地址获取经纬度，计算两个坐标的距离

1、到高德开放平台申请&#xff0c;获取key 高德开放平台&#xff1a;https://lbs.amap.com/ 2、下载高德定位及地址搜索SDK:https://download.csdn.net/download/meixi_android/10845407 3、项目绑定高德SDK &#xff08;1&#xff09;配置key <meta-data android:name&q…
阅读更多...
Android中WebService的应用

Android中WebService的应用

1.简介 Android中的WebService 是一种基于SOAP协议的远程调用标准。通过WebService可以将不同操作系统平台&#xff0c;不同语言、不同技术整合到一起。在Android SDK中并没有提供调用WebService的库&#xff0c;因此&#xff0c;需要使用第三方类库&#xff08;KSOAP2&#x…
阅读更多...
宝塔 nginx 配置文件的存放目录配置vue的history模式

宝塔 nginx 配置文件的存放目录配置vue的history模式

在项目中使用vue的history模式&#xff0c;需要配置文件&#xff0c;使用到宝塔面板的服务器。现在记录存放位置。 /www/server/panel/vhost/nginx配置history模式 try_files $uri $uri/ /index.html qkbim/index.html;配置跨域 add_header Access-Control-Allow-Origin *;ad…
阅读更多...
查看Chome浏览器中已保存的密码

查看Chome浏览器中已保存的密码

好累啊&#xff0c;今天上午模拟比赛&#xff0c;敲了一上午的代码&#xff0c;真是够够的&#xff1b;想想自己自学Java&#xff0c;然后自学Android&#xff0c;到现在一直没有放弃&#xff0c;其中要感激的人有很多很多&#xff0c;指导老师等等&#xff0c;最感谢的还是现在…
阅读更多...
前端学习（2701）：重读vue电商网站22之如何重定向路由

前端学习（2701）：重读vue电商网站22之如何重定向路由

在 router配置页中使用 redirect 属性
阅读更多...
vscode开发java自定义代码模版

vscode开发java自定义代码模版

1、打开首选项配置 2、选择全局的 3、填写自己的代码块 {// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable…
阅读更多...
前端学习（2702）：重读vue电商网站23之element-ui 如何按需导入

前端学习（2702）：重读vue电商网站23之element-ui 如何按需导入

在element.js 文件中&#xff0c;按照如下方式&#xff0c;进行按需导入即可。然后通过 Vue.use()方法进行引用。&#xff08;优化点&#xff1a;也就是将组建导入都放在一起&#xff0c;如果组件过多的话&#xff0c;支持换行&#xff09;
阅读更多...
Socket实现Android客户端与服务器的通信

Socket实现Android客户端与服务器的通信

前言&#xff1a;题目要求故写一下总结。 1.什么是Socket? 网络用语叫套接字原理是基于tcp/ip 协议的一种通信手段&#xff0c;目前题目中要求无非就是当客户端数据异常时推送给服务器报警信息 往常接下来都是先看效果图的&#xff0c;由于今天回宿舍有点早&#xff0c;准备有…
阅读更多...
完成聊天室的私聊功能

完成聊天室的私聊功能

1 完成聊天室的私聊功能 完成聊天室私聊功能。私聊功能是指&#xff0c;客户端之间可以实现一对一的聊天。 服务器端程序启动后&#xff0c;将等待客户端连接&#xff0c;界面效果如图&#xff0d;1所示&#xff1a; 图&#xff0d;1 客户端程序运行时&#xff0c;需要用户先输…
阅读更多...
高德地图跟百度地图经纬度互转

高德地图跟百度地图经纬度互转

1、高德经纬度转百度经纬度&#xff1a; "http://api.map.baidu.com/geoconv/v1/?coords"endlo","endla"&from3&to5&ak""Hi7RspVbu9xQNVUi0S7iP0OLLQbNfn""&mcode07:63:0A:B5:14:92:C6:95:43:8C:5E:78:1D:27:27…
阅读更多...
前端学习（2703）：重读vue电商网站24之配置axios

前端学习（2703）：重读vue电商网站24之配置axios

在 main.js 文件内进行配置 那么&#xff0c;此时我们就可以通过 this访问登录组件原型上 $http 方法&#xff0c;来发起对后端的请求了。
阅读更多...
StudentManager-java+mysql学生管理系统

StudentManager-java+mysql学生管理系统

哎&#xff0c;还是没坚持写下来&#xff0c;时间过得也好快&#xff0c;转眼大二上学期就要结束了&#xff0c;算了&#xff0c;先附上几天写的java-mysql学生管理系统吧 先看效果图吧&#xff0c;没录动态图&#xff0c;将就着看吧 1.程序登陆&#xff0c;初始界面 2.根据名字…
阅读更多...
message:MCODE参数不存在，mobile类型mcode参数必需

message:MCODE参数不存在，mobile类型mcode参数必需

是不是高德地图转百度地图经纬度报错 问题是缺少mcode参数——也就是缺少安全码 解决方法&#xff1a;https://blog.csdn.net/meixi_android/article/details/84987062
阅读更多...
前端学习（2704）：重读vue电商网站25之保存token

前端学习（2704）：重读vue电商网站25之保存token

将登录成功之后的 token&#xff0c;保存到客户端的 sessionStorage 中 项目中除了登录之外的其它 api 接口&#xff0c;必须在登录之后才能访问token 只应在当前网站打开期间生效&#xff0c;所以将 token 保存在 sessionStorage 中 通过编程式导航跳转到后台主页&#xff0c…
阅读更多...
000 SpringMVC介绍

000 SpringMVC介绍

1.介绍 2.MVC 模型(Model)封装了应用程序数据&#xff0c;通常它们将由POJO类组成。视图(View)负责渲染模型数据&#xff0c;一般来说它生成客户端浏览器可以解释HTML输出。控制器(Controller)负责处理用户请求并构建适当的模型&#xff0c;并将其传递给视图进行渲染。3.Dispat…
阅读更多...
前端学习（2705）：重读vue电商网站26之路由导航守卫控制访问权限

前端学习（2705）：重读vue电商网站26之路由导航守卫控制访问权限

如果用户没有登录&#xff0c;但是直接通过URL访问特定页面&#xff0c;需要重新导航到登录页面。 在之前的操作中&#xff0c;我们登录之后会种植一个 token 值&#xff0c;表示我们登录成功了&#xff0c;那么此时我们将 token 值去掉呢&#xff1f; 直接点击上述 clear all …
阅读更多...
时隔多日,旧域名重用,niceyoo博客上线

时隔多日,旧域名重用,niceyoo博客上线

前言 从昨天我的年算过完了&#xff0c;亲戚同学也走过来了&#xff0c;实在是觉得无聊&#xff0c;所以就开始在论坛呀、博客呀什么的乱逛&#xff0c;突然记起来博客好久没写了&#xff0c;不过并没着急写文章、 而是决定搭建一个域名博客&#xff0c;也算是一个激励自己学习…
阅读更多...
iptables封禁端口

iptables封禁端口

需求&#xff1a;之前运维的服务器&#xff0c;爆出漏洞&#xff0c;我要做的就是把5000接口封禁。 然后找了一些iptables的教程。最终解决方案如下&#xff1a; iptables -I FORWARD -p tcp --dport 5000 -j DROP执行完&#xff0c;立即生效 配套资料 1. 禁止指定 IP ipt…
阅读更多...
为什么BDLocationListener没有被调用

为什么BDLocationListener没有被调用

百度地图定位bug 这个问题主要有两个因素 1、看这个key。有木有对 <meta-dataandroid:name"com.baidu.lbsapi.API_KEY"android:value"qn3ZT2xT7yDgbIgkaPooGpDdMjziASZj" /> 2、看这个服务有木有添加 <serviceandroid:name"com.baidu.lo…
阅读更多...
前端学习（2706）：重读vue电商网站26之JSON格式的配置文件

前端学习（2706）：重读vue电商网站26之JSON格式的配置文件

在项目根目录创建名为 .prettierrc 的文件&#xff0c;增加如下代码&#xff1a; Css {"semi": false,"singleQuote": true }semi设置 false去掉分号&#xff0c;singleQuote 设置 true使用单引号。 此外&#xff0c;还可以禁用 function 处空格报错&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023