Slider 滑块实现自动播放及往前往后移动的组件

<template>
	<div class="time-line" v-show="true">
		<el-row>
			<el-col :span="4">
				<div class="content" style="display:inline-block;">
					<img
						v-if="!show"
						:src="'./static/images/newstop.png'"
						title="暂停"
						style="margin-right:10px"
						@click="palyChange('play')"
						alt
					/>
					<img
						v-if="show"
						:src="'./static/images/newplay.png'"
						title="播放"
						style="margin-right:10px"
						@click="palyChange('stop')"
						alt
					/>
					<img
						:src="'./static/images/newpre.png'"
						title="向前"
						style="margin-left:10px"
						@click="prevStep()"
						alt
					/>
				</div>
			</el-col>
			<el-col :span="16">
				<div class="content content-margin">
					<el-slider
						v-model="currIndex"
						:show-tooltip="false"
						:max="maxIndex"
					></el-slider>
				</div>
			</el-col>
			<el-col :span="2">
				<div class="content">
					<img
						:src="'./static/images/newnext.png'"
						title="向后"
						@click="nextStep()"
						class="toNext"
						alt
					/>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import pyramidConfig from "static/config/pyramid.js";//配置文件
	export default {
		name: "time-line",
		props: {
			params: {
				type: Array,
				default: {}
			},
			year: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				show: true,
				isTranscribe: true,
				currIndex: 0,
				maxIndex: pyramidConfig.period.length-1,
				yearData: {},
				timer: null
			};
		},
		created() {	
		},
		computed: {},
		mounted() {
		},
		// 组件销毁时清除组件
		beforeDestroy() {
			clearInterval(this.timer);
		},
		watch: {},
		methods: {
     //自动播放
			palyChange(val) {
				let that = this;
				if (val == "stop") {
					if (that.timer) {
						clearInterval(that.timer);
					}
					that.show = false;
					that.timer = setInterval(() => {
						that.currIndex += 1;
						if (that.currIndex > that.maxIndex) {
							that.currIndex = 0;
						}
						//调用vuex方法改变全局数据
						this.$store.commit("yearChang", this.params[this.currIndex]);
					}, 3000);
				} else {
					clearInterval(that.timer);
					that.show = true;
				}
			},
			// 往后播放
			nextStep() {
				clearInterval(this.timer);
				if (this.currIndex ===this.maxIndex) {
					this.currIndex = 0;
				} else {
					this.currIndex += 1;
				}
            this.$store.commit("yearChang", this.params[this.currIndex]);
			},
			// 往前播放
			prevStep() {
				clearInterval(this.timer);
				if (this.currIndex === 0) {
					this.currIndex = this.maxIndex;
				} else { 
					this.currIndex -= 1;
				}
				this.$store.commit("yearChang", this.params[this.currIndex]);
			}
		}
	};
</script>

.time-line {
	.el-slider__stop {
			background-color: #1568f8;
		}
		.el-row {
			height: 100%;
			background-color: rgba(29, 43, 131, 0.17);
		}
	}
	.content .el-slider__runway {
		background: rgba(255, 255, 255, 0.2);
	}
	.content .el-slider__bar {
		background: #1568f8;
	}
		position: absolute;
		z-index: 1980;
		background: #07163c;
		width: 600px;
		border-radius: 5px;
		padding-right: 10px;
		padding-left: 5px;
		height: 50px;
		line-height: 50px;
		bottom: 50px;
		left: calc(50% - 250px);
		text-align: center;
		.content {
			height: 50px;
			line-height: 50px;
			position: relative;
			.el-slider {
				margin-top: 6px;
				margin-left: 16px;
				margin-right: 16px;
			}
			img {
				width: 27px;
				height: 27px;
				margin-right: 5px;
				vertical-align: middle;
				cursor: pointer;
			}
			.year {
				font-size: 1.4rem;
				color: #fff;

				display: inline-block;
				width: 96px;
				text-align: center;
			}
			.close {
				position: absolute;
				top: -2px;
				right: 6px;
				font-size: 14px;
				color: #fff;
				cursor: pointer;
			}
		}
	}
		@media screen and (max-width: 1399px) {
		.time-line {
			.content {
				height: 34px !important;
				line-height: 32px !important;
				margin-top: 0 !important;
				position: relative;
				img {
					width: 20px !important;
					height: 20px !important;
					margin-left: 2px !important;
					vertical-align: middle;
					cursor: pointer;
				}
			}
			.content-margin {
				margin-right: 10px;
				margin-left: 10px;
				.el-slider {
					.el-slider__runway {
						margin-bottom: 0;
						margin-top: 14px;
					}
				}
			}
			.el-slider__button {
				width: 12px;
				height: 12px;
				border: 2px solid rgba(29, 156, 183, 1);
				background-color: rgba(29, 156, 183, 1);
				border-radius: 50%;
				-webkit-transition: 0.2s;
				transition: 0.2s;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
		}
	}