<template> <ul class="relative flex jusitify-center items-center list-none"> <li v-for="(item, index) in data" ref="lis" :key="item[value as K] as PropertyKey" :class="[  'flex jusitify-center items-center h-8 px-2 z-10 leading-none',  curValue[value as K]===item[value as K] && 'text-white'  ]" @click="onClick(item, index)" > <input class="hidden" type="radio" :name="name" :value="item[value as K]" :checked="curValue[value as K]===item[value as K]" /> <label class="cursor-pointer"> {{ item[label] }} </label> </li> <li ref="slider" class="absolute left-0 top-1/2 rounded bg-primary transform-[translateY(-50%)] transition-all duration-300 ease-in-out" /> </ul> </template> <script setup lang="ts" generic="T extends Record<string,unknown>,K extends keyof T" > interface Props {  data: Array<T>  isObject?: boolean  label?: string  value?: K  modelValue?: Partial<T> | T[K]  prefix?: string } defineOptions({ name: 'MxSegment' }) const props = withDefaults(defineProps<Readonly<Props>>(), {  isObject: () => false,  label: () => 'label',  value: () => 'value' as K,  prefix: () => 'mx' }) const emit = defineEmits<{  (type: 'update:modelValue', arg: Props['modelValue']) }>() const curValue = computed<Partial<T>, Partial<T>>({  get() {  return props.isObject  ? props.modelValue || {}  : ({ [props.value as K]: props.modelValue } as Partial<T>)  },  set(value) {  const _ = props.isObject ? value : value[props.value as K]  emit('update:modelValue', _)  } }) const name = `${props.prefix}-${useId()}` const lis = ref<Array<HTMLLIElement>>() const slider = ref<HTMLLIElement>() function calcPosition(i: number) {  if (i >= 0) {  const liItem = lis.value![i]  slider.value!.setAttribute(  'style',  `width:${liItem.offsetWidth}px;height:${liItem.offsetHeight}px;left:${liItem.offsetLeft}px;`  )  } } function onClick(value: Partial<T>, i: number) {  curValue.value = value  nextTick(() => {  calcPosition(i)  }) } onMounted(() => {  const i = props.data.findIndex(  item => item[props.value] === (curValue.value as T)[props.value as K]  )  calcPosition(i) }) </script>