<template>
<div class="scale-component">
<div
ref="container"
class="scale-container"
@click="handleClick"
>
<!-- 刻度线 -->
修改为适应vue2的代码
<div
v-for="tick in visibleTicks"
:key="tick.value"
class="tick"
:class="tick.class"
:style="{ left: tick.position + '%' }"
>
<!-- 标签渲染 -->
<span
v-if="tick.showLabel"
class="tick-label"
:style="getLabelStyle(tick)"
>
{{ tick.label }}
</span>
</div>
<!-- 指示器 -->
<div
class="indicator"
:style="{ left: currentPosition + '%' }"
>
<div class="pointer"></div>
<span class="indicator-value">{{ currentValue.toFixed(1) }}</span>
</div>
</div>
</div>
</template>
<script>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
export default {
props: {
min: {
type: Number, default: 0 },
max: {
type: Number, default: 10.0 },
step: {
type: Number, default: 0.1 },
modelValue: {
type: Number, default: 0 },
showHalfLabels: {
type: Boolean, default: true },
densityThreshold: {
type: Number, default: 30 } // 最小像素间距
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const container = ref(null);
const containerWidth = ref(0);
const currentValue = ref(props.modelValue);
// 监听容器宽度变化
const observer = new ResizeObserver(entries => {
if (entries[0]) containerWidth.value = entries[0].contentRect.width;
});
// 生成所有刻度点 (101个)
const allTicks = computed(() => {
const ticks = [];
const
range = props.max - props.min;
for (let value = props.min; value <= props.max; value += props.step) {
const position = ((value - props.min) /
range) * 100;
const isMajor = value % 1 === 0;
const isMinor = !isMajor && value % 0.5 === 0;
const isEdge = value === props.min || value === props.max;
ticks.push({
value,
position,
class: {
'major-tick': isMajor,
'minor-tick': isMinor,
'micro-tick': !isMajor && !isMinor,
'edge-tick': isEdge
},
label: isMajor ? value.toFixed(0) : value.toFixed(1),
showLabel: false // 初始不显示
});
}
return ticks;
});
// 智能渲染可见刻度
const visibleTicks = computed(() => {
if (!containerWidth.value) return [];
const minSpacing = props.densityThreshold; // 最小间距(像素)
const visible = [];
let lastLabelPos = -minSpacing; // 最后标签位置
for (const tick of allTicks.value) {
const pixelPos = (tick.position / 100) * containerWidth.value;
const isMajor = tick.value % 1 === 0;
const isMinor = !isMajor && tick.value % 0.5 === 0;
const isEdge = tick.value === props.min || tick.value === props.max;
// 智能显示标签
tick.showLabel = false;
// 边缘标签始终显示
if (isEdge) {
tick.showLabel = true;
lastLabelPos = pixelPos;
}
// 整数标签智能显示
else if (isMajor) {
if (pixelPos - lastLabelPos >= minSpacing) {
tick.showLabel = true;
lastLabelPos = pixelPos;
}
}
// 0.5标签智能显示
else if (isMinor && props.showHalfLabels) {
if (pixelPos - lastLabelPos >= minSpacing * 0.7) {
tick.showLabel = true;
lastLabelPos = pixelPos;
}
}
// 微刻度根据密度显示
const shouldRender = isMajor || isMinor ||
(containerWidth.value / allTicks.value.length > 5) ||
isEdge;
if (shouldRender) visible.push(tick);
}
return visible;
});
// 当前值位置
const currentPosition = computed(() => {
return ((currentValue.value - props.min) / (props.max - props.min)) * 100;
});
// 标签防溢出
样式
const getLabelStyle = (tick) => {
const isMin = tick.value === props.min;
const isMax = tick.value === props.max;
if (isMin) {
return {
transform: 'translateX(0)',
left: '0.5em'
};
} else if (isMax) {
return {
transform: 'translateX(-100%)',
left: 'auto',
right: '0.5em'
};
} else {
return {
transform: 'translateX(-50%)'
};
}
};
// 点击设置值
const handleClick = (event) => {
if (!container.value) return;
const rect = container.value.getBoundingClientRect();
const offsetX = event.clientX - rect.left;
const percent = offsetX / rect.width;
// 计算
新值
const newValue = props.min + percent * (props.max - props.min);
// 步长取整
const steps = Math.round((newValue - props.min) / props.step);
const fixedValue = Math.min(props.max, Math.max(props.min,
props.min + steps * props.step));
currentValue.value = fixedValue;
emit('update:modelValue', fixedValue);
};
// 响应式监听
onMounted(() => {
if (container.value) observer.observe(container.value);
});
onBeforeUnmount(() => {
if (container.value) observer.unobserve(container.value);
});
// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
currentValue.value = newVal;
});
return {
container,
visibleTicks,
currentPosition,
currentValue,
getLabelStyle,
handleClick
};
}
};
</script>
本文介绍如何通过CSS和JavaScript自定义HTML中range输入类型的样式，实现动态改变背景比例和拖动块样式，同时更新相关数值显示。
扫一扫
8351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
