基于el-slider实现刻度尺进度条封装

结果：
所需素材图：
封装插件：

<template>
  <div class="block">
    <div class="title_block" :style="{ left: timestep + '%' }" v-if="isFar">
      <span>当前实点计划</span>
      <img src="./images/xiabiao.png" class="title_img" alt="" />
    </div>
    <el-slider
      v-model="timestep"
      :step="10"
      :marks="marks"
      show-stops
      :max="100"
      disabled
      :show-tooltip="false"
    ></el-slider>
    <img src="./images/lines.png" alt="" class="kedu" />
  </div>
</template>

<script>
export default {
  props: ["timestep", "isFar"],
  data() {
    return {
      marks: {
        0: "0%",
        10: "10%",
        20: "20%",
        30: "30%",
        40: "40%",
        50: "50%",
        60: "60%",
        70: "70%",
        80: "80%",
        90: "90%",
        100: "100%",
      },
    };
  },
  methods: {},
};
</script>

<style scoped lang="less">
.block {
  position: relative;
  .kedu {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 10px;
  }
  .title_block {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: -30px;
    span {
      font-size: 13px;
      color: #ff8089;
      transform: translateX(-38px);
    }
    .title_img {
      display: block;
      width: 20px;
      margin-top: 5px;
      transform: translateX(-8px);
    }
  }
  /deep/.el-slider__runway {
    width: 100%;
    height: 38px;
    background: #f7f7f5;
    border: 2px solid #ccd7d3;
    padding: 2px;
    .el-slider__stop {
      &:first-child {
        display: none;
      }
      &:last-child {
        display: none;
      }
      height: 38px;
      width: 3px;
      border-radius: 0;
      background-color: #f7f7f5;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    .el-slider__marks-text {
      margin-top: 48px;
      margin-left: 13px;
    }
    .el-slider__bar {
      height: 38px;
      left: 2px !important;
      background-color: #5fadff;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      position: absolute;
    }
    .el-slider__button-wrapper {
      display: none;
    }
  }
}
</style>

引用：

<template>
  <div class="content">
    <Slider :timestep="71.5" :isFar="false"></Slider>
  </div>
</template>

<script>
import Slider from "./apps.vue";
export default {
  components: {
    Slider,
  },
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.content{
    width: 50%;
    height: 300px;
    padding-top: 200px;
    margin: auto;
}
</style>