gao-customer-h5/src/components/SegmentedSlider.vue

<template>
	<div ref="sliderRef" class="segmented-slider" :style="sliderStyle">
		<span class="thumb" />
		<button
			v-for="(item, index) in options"
			:key="item.value"
			:ref="element => setOptionRef(element, index)"
			class="option"
			:class="{ active: item.value === modelValue }"
			type="button"
			@click="selectOption(item.value)"
		>
			<span v-text="item.label" />
		</button>
	</div>
</template>

<script setup lang="ts">
import type { ComponentPublicInstance } from "vue";

interface SegmentedSliderOption {
	label: string;
	value: string;
}

const props = defineProps<{
	modelValue: string;
	options: SegmentedSliderOption[];
}>();

const emit = defineEmits<{
	"update:modelValue": [value: string];
	change: [value: string];
}>();

const sliderRef = ref<HTMLElement>();
const optionRefs = ref<HTMLElement[]>([]);
const activeMetrics = reactive({
	left: 0,
	width: 0
});
let sliderResizeObserver: ResizeObserver | undefined;

const activeIndex = computed(() => {
	const index = props.options.findIndex(item => item.value === props.modelValue);
	return 0 < index ? index : 0;
});
const sliderStyle = computed(() => ({
	"--thumb-left": `${activeMetrics.left}px`,
	"--thumb-width": `${activeMetrics.width}px`
}));

function setOptionRef(element: Element | ComponentPublicInstance | null, index: number): void {
	if (element instanceof HTMLElement) {
		optionRefs.value[index] = element;
	}
}

async function updateThumbMetrics(): Promise<void> {
	await nextTick();
	const activeElement = optionRefs.value[activeIndex.value];
	if (!activeElement) {
		return;
	}

	activeMetrics.left = activeElement.offsetLeft;
	activeMetrics.width = activeElement.offsetWidth;
}

function selectOption(value: string): void {
	emit("update:modelValue", value);
	emit("change", value);
}

watch(() => [
	props.modelValue,
	...props.options.map(item => `${item.value}:${item.label}`)
], async () => {
	await updateThumbMetrics();
});

onBeforeUpdate(() => {
	optionRefs.value = [];
});

onMounted(async () => {
	await updateThumbMetrics();
	if (!sliderRef.value) {
		return;
	}

	sliderResizeObserver = new ResizeObserver(() => {
		void updateThumbMetrics();
	});
	sliderResizeObserver.observe(sliderRef.value);
});

onBeforeUnmount(() => {
	sliderResizeObserver?.disconnect();
});
</script>

<style scoped lang="less">
.segmented-slider {
	gap: 0;
	padding: .25rem;
	display: inline-flex;
	position: relative;
	background: #e5e7eb;
	border-radius: .875rem;

	.thumb {
		top: .25rem;
		left: 0;
		bottom: .25rem;
		width: var(--thumb-width);
		z-index: 0;
		position: absolute;
		transform: translateX(var(--thumb-left));
		background: #fff;
		transition: width .22s ease, transform .22s ease;
		border-radius: .625rem;
	}

	.option {
		flex: 0 0 auto;
		color: #52607a;
		border: 0;
		margin: 0;
		height: 2rem;
		cursor: pointer;
		z-index: 1;
		padding: 0 .75rem;
		display: flex;
		outline: none;
		position: relative;
		font-size: .875rem;
		min-width: 2.75rem;
		appearance: none;
		background: transparent;
		align-items: center;
		justify-content: center;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: transparent;

		&:active {
			background: transparent;
		}

		&:focus {
			outline: none;
		}

		&:focus-visible {
			box-shadow: inset 0 0 0 .0625rem rgba(15, 118, 110, .48);
		}

		span {
			white-space: nowrap;
		}

		&.active {
			color: #0f172a;
		}
	}
}

:global(html.theme-dark) {
	.segmented-slider {
		background: rgba(30, 41, 59, .9);

		.thumb {
			background: rgba(15, 23, 42, .95);
			box-shadow: 0 .25rem .75rem rgba(2, 6, 23, .36);
		}

		.option {
			color: #94a3b8;

			&.active {
				color: #e2e8f0;
			}
		}
	}
}
</style>