el-slider实现刻度尺进度条

最新推荐文章于 2024-05-11 14:10:02 发布

爱吃羊的狗

最新推荐文章于 2024-05-11 14:10:02 发布

阅读量699

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/131658305

版权

el-slider实现刻度尺进度条

在这里插入图片描述

<template>
   <div class="block">
    <el-slider
      v-model="value"
      :marks="guideMarks">
    </el-slider>
  </div>
</template>

<script>
export default {
    data() {
      return {
      }
    },
    computed: {
        /* eslint-disable */
			guideMarks() {
			  let marks = {};
			  for (let i = 0; i <= 100; i++) {
				if (i % 10 == 0) {
				  marks[i] = i + "";
				} else if (i % 2 == 0) {
				  marks[i] = {
					// style: {
					//   color: "#ccc",
					// },
					// label: this.$createElement("span", "|"),
				  };
				}
			  }
              console.log(marks,'marks');
			  return marks;
			},
		},

}
</script>

<style lang="scss" scoped>
.block{
    width: 90%;
    height: 300px;
    margin: 300px auto;
}
::v-deep .el-slider__stop{
  width: 2px;
  height: 13px;
  background: #409eff;
}
::v-deep .el-slider__stop:nth-child(5n + 1){
  width: 2px;
  height: 20px;
  background: #409eff;
}
::v-deep .el-slider__marks-text{
    margin-top: 30px;
}
</style>