pay-employee/src/components/hs-radio-picker/hs-radio-picker.vue

<template>
  <picker
    :range="pickerList"
    :range-key="props?.key || 'name'"
    :disabled="props?.disabled"
    @change="onChange"
  >
    <view class="picker_select_btn">
      <view class="label">{{ selectValue || props?.placeholder }}</view>
      <uni-icons type="down" color="#333" size="12" />
    </view>
  </picker>
</template>
<script setup lang="ts">
import { getApiLoading } from '@/common/libraries/apiLoading'
import { onMounted, ref, watch } from 'vue'
const props = defineProps([
  'Enums',
  'title',
  'pickerIndex',
  'value',
  'borderTop',
  'required',
  'disabled',
  'tip',
  'key',
  'des',
  'padding',
  'valueModel',
  'placeholder',
  'Apis'
])
const pickerList = ref<any>([])
const selectValue = ref('')
const emit = defineEmits(['change', 'update:valueModel'])
const onChange = (e: any) => {
  let selectData: any = pickerList.value[e?.detail.value]
  selectValue.value = selectData?.name
  emit('update:valueModel', selectData?.id || '')
  emit('change', selectData)
}

const getPickerList = () => {
  getApiLoading(props?.Apis, {}).then(res => {
    pickerList.value = [...[{ name: props?.placeholder, id: 0 }], ...res?.data]
    console.log(res)
  })
}

onMounted(() => {
  getPickerList()
})
</script>

<style lang="scss" scoped>
.picker_select_btn {
  background-color: #eee;
  padding: 14rpx 20rpx;
  border-radius: 100rpx;

  text-align: center;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  color: #333;
  margin-left: 30rpx;

  text {
    padding-right: 10rpx;
  }
  .label {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出部分的内容 */
    text-overflow: ellipsis;
    min-width: 100rpx;
    max-width: 200rpx;
  }
}
</style>