vue3 vite element根据自定义数据实现离散滑块

版本：

"element-plus": "^2.11.9",
 "vue": "^3.5.13"
 "@vitejs/plugin-vue": "^5.2.1",
 "vite": "^6.0.11",
 "vite-plugin-vue-devtools": "^7.7.1"

main.js中的内容：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

app.vue中的内容如下：

<template>
  <div class="discrete-slider-container">
    <div class="slider-section">
      <div class="slider-wrapper">
        <div class="vertical-layout">
          <!-- 标签区域 - 反转显示 -->
          <div class="discrete-labels">
            <div
                v-for="(value, index) in reversedValues"
                :key="index"
                class="discrete-label"
                :class="{ active: sliderIndex === (discreteValues.length - 1 - index) }"
                @click="handleLabelClick(discreteValues.length - 1 - index)"
            >
              {{ value }}
            </div>
          </div>

          <!-- 滑块区域 -->
          <div class="slider-area">
            <el-slider
                v-model="sliderIndex"
                :min="0"
                :max="discreteValues.length - 1"
                :step="1"
                :show-stops="true"
                :marks="sliderMarks"
                :show-tooltip="true"
                :format-tooltip="formatTooltip"
                @change="handleSliderChange"
                vertical
                height="300px"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElSlider } from 'element-plus'

// 离散值数组
const discreteValues = [10, 30, 100, 150, 400]

// 当前滑块索引
const sliderIndex = ref(0)

// 反转后的值数组（用于显示）
const reversedValues = computed(() => {
  return [...discreteValues].reverse()
})

// 滑块刻度配置
const sliderMarks = computed(() => {
  const marks = {}
  discreteValues.forEach((value, index) => {
    marks[index] = {
      style: {
        color: '#409EFF',
        fontSize: '12px',
        marginLeft: '8px'
      },
      label: value
    }
  })
  return marks
})

// 格式化工具提示
const formatTooltip = (val) => {
  return discreteValues[val]
}

// 处理滑块变化
const handleSliderChange = (value) => {
  console.log('滑块值变化:', discreteValues[value])
}

// 处理标签点击
const handleLabelClick = (index) => {
  sliderIndex.value = index
}

// 组件挂载时初始化
onMounted(() => {
  console.log('离散滑块组件已加载，可用值:', discreteValues)
})
</script>

<style scoped>
.discrete-slider-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.slider-section {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.slider-wrapper {
  position: relative;
}

.vertical-layout {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
}

.discrete-labels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.discrete-label {
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  border: 1px solid transparent;
  text-align: center;
  min-width: 80px;
}

.discrete-label:hover {
  background-color: #f0f9ff;
  color: #409EFF;
  border-color: #409EFF;
}

.discrete-label.active {
  background-color: #409EFF;
  color: white;
  transform: scale(1.05);
}

.slider-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

/* 调整 Element Plus 垂直滑块样式 */
:deep(.el-slider--vertical) {
  height: 300px;
}

:deep(.el-slider__marks-text) {
  margin-left: 12px;
}
</style>

运行后的效果如下：