Vuetify Next：如何为范围滑块添加区间Tooltip？

要实现你需要的区间Tooltip，Vuetify的VRangeSlider本身没有内置这个功能，你可以通过手动自定义的方式来实现，下面是两种可行的思路：

思路一：自定义静态定位Tooltip #

直接在滑块容器内添加一个自定义的Tooltip元素，通过计算两个滑块的位置百分比来动态调整Tooltip的位置，显示区间数值。

示例代码：

<template>
  <div class="slider-wrapper" style="position: relative; width: 90%; margin: 2rem auto;">
    <VRangeSlider
      v-model="sliderValue"
      step="10"
      thumb-label="always"
      :min="0"
      :max="100"
      show-ticks
      persistent-hint
    />
    <!-- 自定义区间Tooltip -->
    <div 
      class="range-tooltip"
      :style="{ left: tooltipPos + '%' }"
    >
      {{ sliderValue[0] }} - {{ sliderValue[1] }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const sliderValue = ref([30, 70])
const tooltipPos = computed(() => {
  // 计算区间中点的百分比位置
  const totalRange = 100 - 0
  const startPercent = (sliderValue.value[0] / totalRange) * 100
  const endPercent = (sliderValue.value[1] / totalRange) * 100
  return (startPercent + endPercent) / 2
})
</script>

<style scoped>
.range-tooltip {
  position: absolute;
  top: -35px;
  transform: translateX(-50%);
  background-color: #1976d2;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
}
</style>

思路二：结合Vuetify的VTooltip组件 #

如果你想复用Vuetify的Tooltip样式，可以用VTooltip组件包裹自定义内容，设置手动触发，然后通过滑块的位置来控制Tooltip的显示和位置。

示例代码：

<template>
  <div class="slider-wrapper" style="position: relative; width: 90%; margin: 2rem auto;">
    <VRangeSlider
      v-model="sliderValue"
      step="10"
      thumb-label="always"
      :min="0"
      :max="100"
      show-ticks
      persistent-hint
      @update:model-value="updateTooltip"
    />
    <VTooltip
      v-model="tooltipVisible"
      location="top"
      manual
    >
      <template v-slot:activator="{ props }">
        <div 
          v-bind="props"
          class="tooltip-anchor"
          :style="{ left: tooltipPos + '%' }"
        ></div>
      </template>
      <span>{{ sliderValue[0] }} - {{ sliderValue[1] }}</span>
    </VTooltip>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const sliderValue = ref([30, 70])
const tooltipVisible = ref(true)
const tooltipPos = computed(() => {
  const totalRange = 100 - 0
  const startPercent = (sliderValue.value[0] / totalRange) * 100
  const endPercent = (sliderValue.value[1] / totalRange) * 100
  return (startPercent + endPercent) / 2
})

// 滑块值变化时保持Tooltip显示
const updateTooltip = () => {
  tooltipVisible.value = true
}

// 初始化时显示Tooltip
watch(() => sliderValue, () => {
  tooltipVisible.value = true
}, { immediate: true })
</script>

<style scoped>
.tooltip-anchor {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}
</style>

这两种方法都能实现区间Tooltip的效果，你可以根据自己的样式需求选择，也可以调整Tooltip的位置、颜色等样式来匹配你的设计。

内容的提问来源于stack exchange，提问作者Vinicius Andrade