vue写个带有刻度尺的组件

好的，请稍等，我会为您查找相关的技术资料和示例代码。以下是一个基于 Vue 的带有刻度尺的组件示例:

<template>
  <div class="slider">
    <div class="slider-container">
      <div class="slider-track" :style="`width:${size}px`"></div>
      <div class="slider-select" :style="`left:${left}px;width:${width}px`"></div>
      <div class="slider-labels" :style="`width:${size}px`">
        <span v-for="(label, index) in labels" :key="index" class="slider-label" :style="`left:${(index * labelSize) - (labelSize / 2)}px`">{{label}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SliderWithScale',
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 10
    },
    step: {
      type: Number,
      default: 1
    },
    value: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 300
    },
    labelSize: {
      type: Number,
      default: 50
    },
    labels: {
      type: Array,
      default: () => ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    }
  },
  computed: {
    left() {
      return ((this.value - this.min) / (this.max - this.min)) * this.size
    },
    width() {
      return this.labelSize
    }
  },
  methods: {
    setValue(e) {
      const offsetX = e.offsetX
      const percent = offsetX / this.size
      const value = Math.floor(this.min + ((this.max - this.min) * percent) / this.step) * this.step
      this.$emit('input', value)
    }
  }
}
</script>

<style>
.slider {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.slider-container {
  width: 100%;
  height: 10px;
  background-color: #aaa;
  position: relative;
}

.slider-track {
  height: 100%;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-select {
  height: 10px;
  background-color: #eee;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-labels {
  position: absolute;
  top: 20px;
  display: flex;
  justify-content: space-between;
}

.slider-label {
  font-size: 12px;
  position: relative;
  top: -10px;
}
</style>

您可以根据您自己的需要对组件进行设置和自定义样式，使用示例代码为：

<SliderWithScale v-model="value" :min="0" :max="100" :step="10" />

在您的 Vue 项目中添加此组件并使用即可。希望能帮到您！