frontend-uniapp/src/components/PickerItem.vue

<script setup lang="ts">
export interface PickerItemOption {
  label: string
  value: string | number
}
const props = defineProps<{
  modelValue: string | number
  options: PickerItemOption[]
}>()

const emits = defineEmits<{
  'update:modelValue': [string | number]
}>()

function bindPickerChange(e: { detail: { value: number | string } }) {
  const currentIndex = e.detail.value as number
  emits('update:modelValue', props.options[currentIndex].value)
}

const index = ref(0)

watch(() => props.modelValue, (currentValue) => {
  const currentIndex = props.options.findIndex(option => option.value === currentValue)
  index.value = currentIndex === -1 ? 0 : currentIndex
}, { immediate: true })
</script>

<template>
  <picker :value="index" :range="options" range-key="label" @change="bindPickerChange">
    <view>
      {{ options[index].label }}
    </view>
  </picker>
</template>

<style scoped>

</style>