工具提示在 vueform 滑块中重叠

Question

我在我的一个表单字段中使用这个滑块（https://github.com/vueform/slider#multiple-slider），由于某些原因，两个工具提示都卡在一个地方。

滑块组件的模板代码：

<template>
  <div class="input-container">
    <label class="input-label">{{ label }}</label>
    <div class="input-field">
      <Slider 
        v-model="value"
        :min="0"
        :max="4500"
        :showTooltip="always"
        :format="formatTooltip"
        class="slider-red"
        />
    </div>
  </div>
</template>

脚本：

<script>

import Slider from '@vueform/slider'
import '@vueform/slider/themes/default.css';

export default {
  name: 'RangeSlider',
  components: {
    Slider,
  },
  props: {
    label: String,
  },
  data() {
    return {
      value: [0, 4500],
    }
  },
  watch: {
    activeButton(newValue) {
      this.activeButtonValue = newValue
    },
  },
  methods: {
    formatTooltip(val) {
      return `$${val}`
    },
  },
}
</script>

<style scoped>
.input-label {
  position: absolute;
  top: -10px;
  left: 10px;
  color: #d7c8f1;
  padding: 0 5px;
  text-decoration-color: white;
}

.input-field {
  padding-top: 20px;
  padding-bottom: 20px;
  border: 1px solid var(--secondary-color);
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.space-right {
  margin-right: 16px;
}

.active {
  border: 1px solid var(--secondary-color);
  padding: 4px !important;
  border-radius: 12px !important;
  color: #101828 !important;
  background-color: #f9fafb;
}

.button {
  border: none;
  color: var(--primary-color);
  font-weight: 500;
  font: inherit;
  cursor: pointer;
  padding: 0px;
  border-radius: 8px;
}
.content-button {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
}

.slider-red {
  --slider-connect-bg: #EF4444;
  --slider-tooltip-bg: #EF4444;
  --slider-handle-ring-color: #EF444430;
}

</style>

我已经尝试格式化类的宽度/高度，但它似乎不起作用。

问题状态：

Answer 1

你只是在数组中给出值。我不确定它是否完全可行，所以在你提供一个可用的游乐场之前，我希望我能以某种方式提供帮助。

替换这些

data() {
    return {
      value: [0, 4500],
    }
  }

到

data: () => ({
  tooltip: {
    value:[0 ,4500],
    format: function (value) {
      return `$${Math.round(value)}`
    }
  },
})

您的模板视图将如下所示。

<div class="input-container">
  <label class="input-label">{{ tooltip.value }}</label>
  <div class="input-field">
    <Slider
      :showTooltip="always"
      :format="formatTooltip"
      class="slider-red"
      v-model="tooltip.value"
      v-bind="tooltip"
    ></Slider>
  </div>
</div>