Vue 添加时间轴 vue-light-timeline

该时间轴是安装的一个插件，需要安装包

npm install vue-light-timeline

如果你使用的是yarn

yarn add vue-light-timeline

使用方法：

<template>
	<div>
		<el-dialog
			class="multiPeriodImagesDialog"
			title="历史数据"
			:visible.sync="showdialog"
			:close-on-click-modal="choosefalse"
			width="20%"
			top="13vh"
			:modal="choosefalse"
			@opened="initHistoryData"
			v-el-drag-dialog
		>
			<light-timeline :items="items" class="lightTimeline">
				<template slot="tag" slot-scope="{ item }">
					{{ item.date }}
				</template>
				<template slot="content" slot-scope="{ item }">
					{{ item.msg }}
				</template>
			</light-timeline>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: "MultiPeriodImages",
	data() {
		return {
			showdialog: false,
			choosefalse: false,
			items: [
				{
					date: "2019-02-12",
					msg: "测试内容",
				},
				{
					date: "2019-02-13",
					msg: "练习内容",
				},
				{
					date: "2019-02-13",
					msg: "练习内容",
				},
				{
					date: "2019-02-13",
					msg: "练习内容",
				},
				{
					date: "2019-02-13",
					msg: "练习内容",
				},
				{
					date: "2019-02-13",
					msg: "练习内容",
				},
			],
		};
	},
	initHistoryData() {},
};
</script>
<style>
.multiPeriodImagesDialog {
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0;
	pointer-events: none;
}
.multiPeriodImagesDialog .el-dialog {
	position: absolute;
	right: 5px;
	margin: 0px;
	max-height: 450px;
	max-width: 300px;
}
.lightTimeline {
	max-height: 300px;
	overflow: scroll;
	color: aliceblue;
}
</style>

 

但是目前还没发现是否有点击事件。